mirror of
https://github.com/pockethost/pockethost.git
synced 2025-05-30 10:46:39 +00:00
enh: bootstrap 5.3 update, hljs dark mode
This commit is contained in:
Ben Allfree
parent
992b905b5d
commit
447c5f06a3
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="light">
|
||||
<html lang="en" data-bs-theme="light">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
@ -8,12 +8,13 @@
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css"
|
||||
id="hljs-link"
|
||||
/>
|
||||
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
|
||||
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
|
||||
@ -37,8 +38,8 @@
|
||||
<div>%sveltekit.body%</div>
|
||||
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
</body>
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
import { dbg } from '$util/logger'
|
||||
import { Highlight } from 'svelte-highlight'
|
||||
import { typescript, type LanguageType } from 'svelte-highlight/languages'
|
||||
import 'svelte-highlight/styles/github.css'
|
||||
|
||||
export let code: string
|
||||
export let language: LanguageType<'typescript' | 'bash'> = typescript
|
||||
|
||||
@ -1,38 +1,13 @@
|
||||
<script lang="ts">
|
||||
import { browser } from '$app/environment'
|
||||
import { assertTruthy } from '@pockethost/common'
|
||||
import { find } from '@s-libs/micro-dash'
|
||||
import Cookies from 'js-cookie'
|
||||
import { onMount } from 'svelte'
|
||||
|
||||
// Set some default values to be referenced later
|
||||
enum ThemeNames {
|
||||
Light = 'light',
|
||||
Dark = 'dark'
|
||||
}
|
||||
const ALLOWED_THEMES: ThemeNames[] = [ThemeNames.Light, ThemeNames.Dark]
|
||||
const DEFAULT_THEME: ThemeNames = ThemeNames.Light
|
||||
const STORAGE_NAME: string = 'theme'
|
||||
const THEME_ATTRIBUTE: string = 'data-theme'
|
||||
const THEME_ICONS: { [_ in ThemeNames]: string } = {
|
||||
[ThemeNames.Light]: 'bi bi-moon-stars',
|
||||
[ThemeNames.Dark]: 'bi bi-brightness-high'
|
||||
}
|
||||
|
||||
const html = () => {
|
||||
const htmlElement = document.querySelector('html')
|
||||
assertTruthy(htmlElement, `Expected <html> element to exist`)
|
||||
return htmlElement
|
||||
}
|
||||
const currentTheme = () => {
|
||||
const htmlElement = html()
|
||||
const _att = htmlElement.getAttribute(THEME_ATTRIBUTE)
|
||||
const currentTheme = find(ALLOWED_THEMES, (v) => _att === v) || DEFAULT_THEME
|
||||
return currentTheme
|
||||
}
|
||||
const currentIcon = () => {
|
||||
return THEME_ICONS[currentTheme()]
|
||||
}
|
||||
import {
|
||||
THEME_ICONS,
|
||||
ThemeNames,
|
||||
currentIcon,
|
||||
getCurrentTheme,
|
||||
setCurrentTheme
|
||||
} from './helpers/theme'
|
||||
|
||||
// This can change the CSS a bit depending on where the theme toggle is rendered
|
||||
export let navLink: boolean = false
|
||||
@ -42,25 +17,20 @@
|
||||
|
||||
// Wait for the DOM to be available
|
||||
onMount(() => {
|
||||
updateTheme(currentTheme())
|
||||
updateTheme(getCurrentTheme())
|
||||
})
|
||||
|
||||
// Alternate the theme values on toggle click
|
||||
const handleClick = () => {
|
||||
const newTheme = currentTheme() === ThemeNames.Light ? ThemeNames.Dark : ThemeNames.Light
|
||||
const newTheme = getCurrentTheme() === ThemeNames.Light ? ThemeNames.Dark : ThemeNames.Light
|
||||
updateTheme(newTheme)
|
||||
}
|
||||
|
||||
const updateTheme = (themeName: ThemeNames) => {
|
||||
const htmlElement = html()
|
||||
|
||||
// Update the icon class name to toggle between light and dark mode
|
||||
iconClass = THEME_ICONS[themeName]
|
||||
|
||||
// Update the HTML element to have the right data-theme value
|
||||
htmlElement.setAttribute(THEME_ATTRIBUTE, themeName)
|
||||
|
||||
Cookies.set(STORAGE_NAME, themeName)
|
||||
setCurrentTheme(themeName)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -11,19 +11,6 @@
|
||||
<title>PocketHost</title>
|
||||
<meta name="description" content={tagline} />
|
||||
|
||||
<script>
|
||||
{
|
||||
const THEME_ATTRIBUTE = 'data-theme'
|
||||
const currentTheme =
|
||||
document.cookie
|
||||
.split('; ')
|
||||
.find((row) => row.startsWith('theme='))
|
||||
?.split('=')?.[1] || 'light'
|
||||
|
||||
document.querySelector('html')?.setAttribute(THEME_ATTRIBUTE, currentTheme)
|
||||
}
|
||||
</script>
|
||||
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
|
||||
<!-- Facebook Meta Tags -->
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<script>
|
||||
{
|
||||
const THEME_ATTRIBUTE = 'data-theme'
|
||||
const THEME_ATTRIBUTE = 'data-bs-theme'
|
||||
const currentTheme =
|
||||
document.cookie
|
||||
.split('; ')
|
||||
@ -9,6 +12,11 @@
|
||||
?.split('=')?.[1] || 'light'
|
||||
|
||||
document.querySelector('html')?.setAttribute(THEME_ATTRIBUTE, currentTheme)
|
||||
const theme = document.querySelector('#hljs-link')
|
||||
if (currentTheme === 'light') {
|
||||
theme.href =
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</svelte:head>
|
||||
|
||||
49
packages/pockethost.io/src/components/helpers/theme.ts
Normal file
49
packages/pockethost.io/src/components/helpers/theme.ts
Normal file
@ -0,0 +1,49 @@
|
||||
import { assertTruthy } from '@pockethost/common'
|
||||
import { find } from '@s-libs/micro-dash'
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
// Set some default values to be referenced later
|
||||
export enum ThemeNames {
|
||||
Light = 'light',
|
||||
Dark = 'dark'
|
||||
}
|
||||
export const HLJS_THEMES = {
|
||||
[ThemeNames.Light]:
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css',
|
||||
[ThemeNames.Dark]:
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/a11y-dark.min.css'
|
||||
}
|
||||
export const ALLOWED_THEMES: ThemeNames[] = [ThemeNames.Light, ThemeNames.Dark]
|
||||
export const DEFAULT_THEME: ThemeNames = ThemeNames.Light
|
||||
export const STORAGE_NAME: string = 'theme'
|
||||
export const THEME_ATTRIBUTE: string = 'data-bs-theme'
|
||||
export const THEME_ICONS: { [_ in ThemeNames]: string } = {
|
||||
[ThemeNames.Light]: 'bi bi-moon-stars',
|
||||
[ThemeNames.Dark]: 'bi bi-brightness-high'
|
||||
}
|
||||
|
||||
export const html = () => {
|
||||
const htmlElement = document.querySelector('html')
|
||||
assertTruthy(htmlElement, `Expected <html> element to exist`)
|
||||
return htmlElement
|
||||
}
|
||||
|
||||
export const getCurrentTheme = () => {
|
||||
const savedTheme = Cookies.get(STORAGE_NAME)
|
||||
const currentTheme = find(ALLOWED_THEMES, (v) => savedTheme === v) || DEFAULT_THEME
|
||||
return currentTheme
|
||||
}
|
||||
|
||||
export const currentIcon = () => {
|
||||
return THEME_ICONS[getCurrentTheme()]
|
||||
}
|
||||
|
||||
export const setCurrentTheme = (themeName: ThemeNames) => {
|
||||
html().setAttribute(THEME_ATTRIBUTE, themeName)
|
||||
const theme = document.querySelector<HTMLLinkElement>('#hljs-link')
|
||||
if (theme) {
|
||||
theme.href = HLJS_THEMES[themeName]
|
||||
}
|
||||
console.log(theme, themeName)
|
||||
Cookies.set(STORAGE_NAME, themeName)
|
||||
}
|
||||
@ -164,7 +164,7 @@ h6 {
|
||||
}
|
||||
|
||||
/* Dark Mode */
|
||||
[data-theme='dark']:root {
|
||||
[data-bs-theme='dark']:root {
|
||||
--bs-black: #fff;
|
||||
--bs-white: #000;
|
||||
--bs-gray: #6c757d;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user