v1.0.23

src/lib/components/theme-toggle.svelte

@@ -1,44 +1,60 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
-	import { Sun, Moon } from 'lucide-svelte';
-	import { onMount } from 'svelte';
+	import { Sun, Moon, Monitor } from 'lucide-svelte';
+	import { onMount, onDestroy } from 'svelte';
 	import { onDarkModeChange } from '$lib/stores/theme';
 
-	let isDark = $state(false);
+	type ThemeMode = 'light' | 'dark' | 'system';
+
+	let mode = $state<ThemeMode>('system');
+	let mediaQuery: MediaQueryList | null = null;
 
 	onMount(() => {
-		// Check for saved preference or system preference
-		const saved = localStorage.getItem('theme');
-		if (saved) {
-			isDark = saved === 'dark';
-		} else {
-			isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-		}
-		updateTheme();
+		const saved = localStorage.getItem('theme') as ThemeMode | null;
+		mode = saved === 'light' || saved === 'dark' || saved === 'system' ? saved : 'system';
+
+		mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+		mediaQuery.addEventListener('change', onSystemChange);
+
+		applyMode();
 	});
 
-	function updateTheme() {
+	onDestroy(() => {
+		mediaQuery?.removeEventListener('change', onSystemChange);
+	});
+
+	function onSystemChange() {
+		if (mode === 'system') {
+			applyMode();
+		}
+	}
+
+	function applyMode() {
+		const isDark = mode === 'dark' || (mode === 'system' && !!mediaQuery?.matches);
+
 		if (isDark) {
 			document.documentElement.classList.add('dark');
 		} else {
 			document.documentElement.classList.remove('dark');
 		}
-		localStorage.setItem('theme', isDark ? 'dark' : 'light');
-		// Apply the correct theme colors for the new mode
 		onDarkModeChange();
 	}
 
-	function toggleTheme() {
-		isDark = !isDark;
-		updateTheme();
+	function cycleTheme() {
+		const order: ThemeMode[] = ['light', 'dark', 'system'];
+		mode = order[(order.indexOf(mode) + 1) % order.length];
+		localStorage.setItem('theme', mode);
+		applyMode();
 	}
 </script>
 
-<Button variant="ghost" size="icon" onclick={toggleTheme} class="h-9 w-9">
-	{#if isDark}
+<Button variant="ghost" size="icon" onclick={cycleTheme} class="h-9 w-9" title={mode === 'system' ? 'Theme: system' : mode === 'dark' ? 'Theme: dark' : 'Theme: light'}>
+	{#if mode === 'dark'}
+		<Moon class="h-4 w-4" />
+	{:else if mode === 'light'}
 		<Sun class="h-4 w-4" />
 	{:else}
-		<Moon class="h-4 w-4" />
+		<Monitor class="h-4 w-4" />
 	{/if}
 	<span class="sr-only">Toggle theme</span>
 </Button>