From d9be62475bf08cada284e316f1bb6a1b6561d177 Mon Sep 17 00:00:00 2001 From: Jason Rasmussen <jason@rasm.me> Date: Mon, 23 Dec 2024 17:45:23 -0500 Subject: [PATCH] fix: theme body class (#50) fix: sync theme class to body --- src/app.css | 8 ++++++++ src/app.html | 2 +- src/lib/services/theme.svelte.ts | 13 +++++++++++++ src/routes/+layout.svelte | 8 ++++++-- 4 files changed, 28 insertions(+), 3 deletions(-) diff --git a/src/app.css b/src/app.css index 23688ec..aa466c2 100644 --- a/src/app.css +++ b/src/app.css @@ -27,3 +27,11 @@ --immich-gray: 33 33 33; } } + +body.dark { + color-scheme: dark; +} + +body:not(.dark) { + color-scheme: light; +} diff --git a/src/app.html b/src/app.html index f22aeaa..0352c1a 100644 --- a/src/app.html +++ b/src/app.html @@ -6,7 +6,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1" /> %sveltekit.head% </head> - <body data-sveltekit-preload-data="hover"> + <body data-sveltekit-preload-data="hover" class="dark bg-light text-dark"> <div>%sveltekit.body%</div> </body> </html> diff --git a/src/lib/services/theme.svelte.ts b/src/lib/services/theme.svelte.ts index 1350782..60da77f 100644 --- a/src/lib/services/theme.svelte.ts +++ b/src/lib/services/theme.svelte.ts @@ -1,3 +1,16 @@ import { Theme } from '$docs/constants.js'; export const theme = $state<{ value: Theme }>({ value: Theme.Dark }); + +export const syncToDom = () => { + switch (theme.value) { + case Theme.Dark: { + document.body.classList.add('dark'); + break; + } + + default: { + document.body.classList.remove('dark'); + } + } +}; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index edde63e..a3f49a7 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -3,7 +3,7 @@ import Navbar from '$docs/components/Navbar.svelte'; import { componentGroups, Theme } from '$docs/constants.js'; import { asComponentHref } from '$docs/utilities.js'; - import { theme } from '$lib/services/theme.svelte.js'; + import { syncToDom, theme } from '$lib/services/theme.svelte.js'; import { AppShell, AppShellHeader, @@ -22,9 +22,13 @@ const themeIcon = $derived(theme.value === Theme.Light ? mdiWeatherSunny : mdiWeatherNight); const isActive = (path: string) => path === page.url.pathname; + + $effect(() => { + syncToDom(); + }); </script> -<AppShell class="{theme.value} bg-light text-dark"> +<AppShell> <AppShellHeader> <Navbar theme={theme.value}> <IconButton