diff --git a/web/src/app.html b/web/src/app.html index a1c6a108..d487fb80 100644 --- a/web/src/app.html +++ b/web/src/app.html @@ -18,6 +18,6 @@ %sveltekit.head% -
%sveltekit.body%
+ %sveltekit.body% diff --git a/web/src/lib/state/theme.ts b/web/src/lib/state/theme.ts new file mode 100644 index 00000000..78e1dd48 --- /dev/null +++ b/web/src/lib/state/theme.ts @@ -0,0 +1,34 @@ +import { readable, derived } from 'svelte/store'; + +import settings from '$lib/settings'; +import { themeOptions } from '$lib/types/settings'; + +let set: (_: typeof themeOptions[number]) => void; + +const browserPreference = () => + window.matchMedia('(prefers-color-scheme: light)') + .matches ? 'light' : 'dark'; + +const browserPreferenceReadable = readable( + browserPreference(), + _set => { set = _set } +) + +const matchMedia = window.matchMedia('(prefers-color-scheme: dark)'); + +if (matchMedia.addEventListener) { + matchMedia.addEventListener('change', () => set(browserPreference())); +} + +export default derived( + [settings, browserPreferenceReadable], + ([$settings, $browserPref]) => { + if ($settings.appearance.theme !== 'auto') { + return $settings.appearance.theme; + } + + return $browserPref; + }, + browserPreference() +); + diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte index e66775a3..4d0aacd2 100644 --- a/web/src/routes/+layout.svelte +++ b/web/src/routes/+layout.svelte @@ -1,13 +1,18 @@ -
- -
- +
+
+ +
+ +
@@ -52,37 +57,34 @@ ); } - /* temporary switcher until theming is implemented, */ - /* just so my eyes don't burn at night */ - @media (prefers-color-scheme: dark) { - :global(:root) { - --primary: #000000; - --secondary: #e1e1e1; + :global([data-theme=dark]) { + --primary: #000000; + --secondary: #e1e1e1; - --gray: #6e6e6e; - --blue: #2a7ce1; - --green: #37aa42; + --gray: #6e6e6e; + --blue: #2a7ce1; + --green: #37aa42; - --button: #191919; - --button-hover: #2a2a2a; - --button-hover-transparent: rgba(225, 225, 225, 0.1); - --button-stroke: rgba(255, 255, 255, 0.05); - --button-text: #e1e1e1; + --button: #191919; + --button-hover: #2a2a2a; + --button-hover-transparent: rgba(225, 225, 225, 0.1); + --button-stroke: rgba(255, 255, 255, 0.05); + --button-text: #e1e1e1; + --button-box-shadow: 0 0 0 1.5px var(--button-stroke) inset; - --sidebar-bg: #101010; - --sidebar-highlight: #f2f2f2; + --sidebar-bg: #101010; + --sidebar-highlight: #f2f2f2; - --input-border: #383838; + --input-border: #383838; - --sidebar-mobile-gradient: linear-gradient( - 90deg, - rgba(16, 16, 16, 0.9) 0%, - rgba(16, 16, 16, 0) 4%, - rgba(16, 16, 16, 0) 50%, - rgba(16, 16, 16, 0) 96%, - rgba(16, 16, 16, 0.9) 100% - ); - } + --sidebar-mobile-gradient: linear-gradient( + 90deg, + rgba(16, 16, 16, 0.9) 0%, + rgba(16, 16, 16, 0) 4%, + rgba(16, 16, 16, 0) 50%, + rgba(16, 16, 16, 0) 96%, + rgba(16, 16, 16, 0.9) 100% + ); } :global(html), @@ -177,6 +179,7 @@ :global(h1, h2, h3, h4, h5, h6) { font-weight: 500; margin-block: 0; + color: var(--secondary); } :global(h1) {