darkmode

src/routes/+layout.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 
+	import { storedTheme } from '$lib/stores/settings';
+
 	import Header from '$lib/components/navigation/header.svelte';
 	import WeatherNav from '$lib/components/navigation/weather-nav.svelte';
 
@@ -10,6 +12,20 @@
 
 	let { children } = $props();
 
+	// keep the .dark class in sync with the persisted theme; in 'system' mode
+	// follow the OS preference live
+	$effect(() => {
+		const theme = $storedTheme;
+		const mq = window.matchMedia('(prefers-color-scheme: dark)');
+		const apply = () => {
+			const dark = theme === 'dark' || (theme === 'system' && mq.matches);
+			document.documentElement.classList.toggle('dark', dark);
+		};
+		apply();
+		mq.addEventListener('change', apply);
+		return () => mq.removeEventListener('change', apply);
+	});
+
 	// the maps page embeds a full-bleed map: no padding, no scrolling
 	let fullBleed = $derived($page.url.pathname.startsWith('/weather/maps'));