feat(web): detect theme based on preferred color scheme

Signed-off-by: Jordan Shatford <[email protected]>

apps/web/src/lib/stores/theme.ts

@@ -2,18 +2,31 @@ import { browser } from '$app/environment';
 import { writable } from 'svelte/store';
 
 const THEME_KEY = 'theme';
+const DEFAULT_THEME = 'light';
+
+export function getInferredDefaultTheme(): 'dark' | 'light' {
+	if (!window.matchMedia) {
+		return DEFAULT_THEME;
+	}
+	if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+		return 'dark';
+	} else {
+		return 'light';
+	}
+}
 
 function createThemeStore() {
-	const { subscribe, set, update } = writable<'light' | 'dark'>('light');
+	const { subscribe, set, update } = writable<'light' | 'dark'>(DEFAULT_THEME);
 
 	if (browser) {
-		const data = localStorage?.getItem(THEME_KEY) as 'light' | 'dark';
+		let data = localStorage?.getItem(THEME_KEY) as 'light' | 'dark';
 
-		if (data) {
-			set(data);
-			if (data === 'dark') {
-				document.querySelector('html')?.classList.add('dark');
-			}
+		if (!data) {
+			data = getInferredDefaultTheme();
+		}
+		set(data);
+		if (data === 'dark') {
+			document.querySelector('html')?.classList.add('dark');
 		}
 	}