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 @@
%sveltekit.head%
-
+
%sveltekit.body%
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();
+ });
-
+