fix: theme body class (#50)

fix: sync theme class to body
immich-app · Dec 23, 2024 · d9be624 · d9be624
1 parent 962fa9e
commit d9be624
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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