From cdf242a6928ea2925721089b029c95d11bb515a4 Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <cabassut.frederic@gmail.com>
Date: Fri, 20 Mar 2026 22:51:44 +0100
Subject: [PATCH] feat: add reactive theme watcher in root layout

---
 src/routes/+layout.svelte | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 01289bd..b013b9d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
 	import '../app.css';
-	import { onMount } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
 	import { pwaInfo } from 'virtual:pwa-info';
+	import { browser } from '$app/environment';
+	import { getPreferences } from '$lib/stores/preferences.svelte.js';
+	import { applyTheme } from '$lib/utils/theme.svelte.js';
 
 	let { children } = $props();
+	let mediaQuery: MediaQueryList | undefined;
+	let systemListener: ((e: MediaQueryListEvent) => void) | undefined;
+
+	const prefs = $derived(getPreferences());
 
 	onMount(async () => {
 		if (pwaInfo) {
@@ -20,6 +27,28 @@
 		}
 	});
 
+	$effect(() => {
+		if (!browser) return;
+		const theme = prefs.theme ?? 'system';
+		applyTheme(theme);
+
+		// Listen for system preference changes when in system mode
+		if (systemListener && mediaQuery) {
+			mediaQuery.removeEventListener('change', systemListener);
+		}
+		if (theme === 'system') {
+			mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+			systemListener = () => applyTheme('system');
+			mediaQuery.addEventListener('change', systemListener);
+		}
+	});
+
+	onDestroy(() => {
+		if (systemListener && mediaQuery) {
+			mediaQuery.removeEventListener('change', systemListener);
+		}
+	});
+
 	const webManifest = $derived(pwaInfo ? pwaInfo.webManifest.linkTag : '');
 </script>