Add theme subscription and update theme toggle logic

src/lib/components/NavMenu.svelte

@@ -13,8 +13,9 @@
 	import Logo from "$lib/components/icons/Logo.svelte";
 	import IconSun from "$lib/components/icons/IconSun.svelte";
 	import IconMoon from "$lib/components/icons/IconMoon.svelte";
-	import { switchTheme } from "$lib/switchTheme";
+	import { switchTheme, subscribeToTheme } from "$lib/switchTheme";
 	import { isAborted } from "$lib/stores/isAborted";
+	import { onDestroy } from "svelte";
 
 	import NavConversationItem from "./NavConversationItem.svelte";
 	import type { LayoutData } from "../../routes/$types";
@@ -100,7 +101,18 @@
 		}
 	});
 
-	let theme = $state(browser ? localStorage.theme : "light");
+	let isDark = $state(false);
+	let unsubscribeTheme: (() => void) | undefined;
+
+	if (browser) {
+		unsubscribeTheme = subscribeToTheme(({ isDark: nextIsDark }) => {
+			isDark = nextIsDark;
+		});
+	}
+
+	onDestroy(() => {
+		unsubscribeTheme?.();
+	});
 </script>
 
 <div
@@ -188,13 +200,12 @@
 		<button
 			onclick={() => {
 				switchTheme();
-				theme = localStorage.theme;
 			}}
 			aria-label="Toggle theme"
 			class="flex size-9 min-w-[1.5em] flex-none items-center justify-center rounded-lg p-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
 		>
 			{#if browser}
-				{#if theme === "dark"}
+				{#if isDark}
 					<IconSun />
 				{:else}
 					<IconMoon />

src/lib/switchTheme.ts

@@ -1,5 +1,37 @@
 export type ThemePreference = "light" | "dark" | "system";
 
+type ThemeState = {
+	preference: ThemePreference;
+	isDark: boolean;
+};
+
+type ThemeSubscriber = (state: ThemeState) => void;
+
+let currentPreference: ThemePreference = "system";
+const subscribers = new Set<ThemeSubscriber>();
+
+function notify(preference: ThemePreference, isDark: boolean) {
+	for (const subscriber of subscribers) {
+		subscriber({ preference, isDark });
+	}
+}
+
+export function subscribeToTheme(subscriber: ThemeSubscriber) {
+	subscribers.add(subscriber);
+
+	if (typeof document !== "undefined") {
+		const preference = getThemePreference();
+		const isDark = document.documentElement.classList.contains("dark");
+		subscriber({ preference, isDark });
+	} else {
+		subscriber({ preference: "system", isDark: false });
+	}
+
+	return () => {
+		subscribers.delete(subscriber);
+	};
+}
+
 function setMetaThemeColor(isDark: boolean) {
 	const metaTheme = document.querySelector('meta[name="theme-color"]') as HTMLMetaElement | null;
 	if (!metaTheme) return;
@@ -11,11 +43,16 @@ function applyDarkClass(isDark: boolean) {
 	if (isDark) classList.add("dark");
 	else classList.remove("dark");
 	setMetaThemeColor(isDark);
+	notify(currentPreference, isDark);
 }
 
 export function getThemePreference(): ThemePreference {
 	const raw = typeof localStorage !== "undefined" ? localStorage.getItem("theme") : null;
-	if (raw === "light" || raw === "dark" || raw === "system") return raw;
+	if (raw === "light" || raw === "dark" || raw === "system") {
+		currentPreference = raw;
+		return raw;
+	}
+	currentPreference = "system";
 	return "system";
 }
 
@@ -33,6 +70,7 @@ export function setTheme(preference: ThemePreference) {
 	}
 
 	const mql = window.matchMedia("(prefers-color-scheme: dark)");
+	currentPreference = preference;
 	const resolve = () =>
 		applyDarkClass(preference === "dark" || (preference === "system" && mql.matches));