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