diff --git a/packages/pockethost.io/src/app.html b/packages/pockethost.io/src/app.html index ae6f8bcd..c258ab7b 100644 --- a/packages/pockethost.io/src/app.html +++ b/packages/pockethost.io/src/app.html @@ -1,5 +1,5 @@ - + @@ -8,12 +8,13 @@ @@ -37,8 +38,8 @@
%sveltekit.body%
diff --git a/packages/pockethost.io/src/components/CodeSample.svelte b/packages/pockethost.io/src/components/CodeSample.svelte index 176bcb23..68a13103 100644 --- a/packages/pockethost.io/src/components/CodeSample.svelte +++ b/packages/pockethost.io/src/components/CodeSample.svelte @@ -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 diff --git a/packages/pockethost.io/src/components/ThemeToggle.svelte b/packages/pockethost.io/src/components/ThemeToggle.svelte index e8a2ef77..9cad2e16 100644 --- a/packages/pockethost.io/src/components/ThemeToggle.svelte +++ b/packages/pockethost.io/src/components/ThemeToggle.svelte @@ -1,38 +1,13 @@ diff --git a/packages/pockethost.io/src/components/helpers/Meta.svelte b/packages/pockethost.io/src/components/helpers/Meta.svelte index d3f3b754..e4c7c0c8 100644 --- a/packages/pockethost.io/src/components/helpers/Meta.svelte +++ b/packages/pockethost.io/src/components/helpers/Meta.svelte @@ -11,19 +11,6 @@ PocketHost - - diff --git a/packages/pockethost.io/src/components/helpers/ThemeDetector.svelte b/packages/pockethost.io/src/components/helpers/ThemeDetector.svelte index af93ad3e..ffd3eb8b 100644 --- a/packages/pockethost.io/src/components/helpers/ThemeDetector.svelte +++ b/packages/pockethost.io/src/components/helpers/ThemeDetector.svelte @@ -1,7 +1,10 @@ + + diff --git a/packages/pockethost.io/src/components/helpers/theme.ts b/packages/pockethost.io/src/components/helpers/theme.ts new file mode 100644 index 00000000..a6a0c393 --- /dev/null +++ b/packages/pockethost.io/src/components/helpers/theme.ts @@ -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 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('#hljs-link') + if (theme) { + theme.href = HLJS_THEMES[themeName] + } + console.log(theme, themeName) + Cookies.set(STORAGE_NAME, themeName) +} diff --git a/packages/pockethost.io/static/global.css b/packages/pockethost.io/static/global.css index c0d0cca0..8563e9c2 100644 --- a/packages/pockethost.io/static/global.css +++ b/packages/pockethost.io/static/global.css @@ -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;