feat(ui/web): move theme handling to ui package

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

apps/web/src/routes/+layout.svelte

@@ -9,14 +9,13 @@
 	import '../app.css';
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
-	import { Toasts, NavBar, Footer } from '@yd/ui';
+	import { Toasts, NavBar, Footer, ThemeToggle } from '@yd/ui';
 	import Loading from '$lib/components/Loading.svelte';
 	import { session } from '$lib/stores/session';
 	import { downloads } from '$lib/stores/downloads';
 	import config from '$lib/config';
 	import { RoutePathConstants, links } from '$lib/utils/route';
 	import Logo from '$lib/components/Logo.svelte';
-	import ThemeChangeIcon from '$lib/components/ThemeChangeIcon.svelte';
 
 	// Use session as token when making requests with client
 	OpenAPI.TOKEN = async () => {
@@ -38,7 +37,7 @@
 		<div class="h-full">
 			<NavBar {links} activeLink={$page.url.pathname}>
 				<Logo slot="logo" />
-				<ThemeChangeIcon slot="right" />
+				<ThemeToggle slot="right" />
 			</NavBar>
 			<main class="mx-auto h-full max-w-7xl px-4 pt-20 sm:px-6 lg:px-8">
 				<slot />

packages/ui/src/lib/components/theme/ThemeToggle.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import IconButton from '../IconButton.svelte';
+	import { MoonIcon, SunIcon } from '../../icons';
+	import { theme } from './store';
+</script>
+
+<IconButton
+	on:click={() => theme.toggle()}
+	src={$theme === 'dark' ? SunIcon : MoonIcon}
+	class="h-10 w-10 text-zinc-500 hover:text-indigo-800 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:text-indigo-600"
+/>

packages/ui/src/lib/components/theme/index.ts

@@ -0,0 +1,2 @@
+export { theme } from './store';
+export { default as ThemeToggle } from './ThemeToggle.svelte';

packages/ui/src/lib/components/theme/store.ts

@@ -0,0 +1,61 @@
+import { writable } from 'svelte/store';
+import { browser } from '../../utilities';
+
+type Theme = 'dark' | 'light';
+
+const THEME_LOCALSTORAGE_KEY = 'theme';
+const DEFAULT_THEME: Theme = 'light';
+
+// Get the default theme value inferred by the browser settings.
+function getInferredDefaultTheme(): Theme {
+	if (browser()) {
+		// Cant match preferred color scheme, return default.
+		if (!window.matchMedia) {
+			return DEFAULT_THEME;
+		}
+		// Use dark theme if preferred by the user.
+		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+			return 'dark';
+		} else {
+			return 'light';
+		}
+	} else {
+		return DEFAULT_THEME;
+	}
+}
+
+function createThemeStore() {
+	const { subscribe, set, update } = writable<Theme>(getInferredDefaultTheme());
+
+	if (browser()) {
+		let data = localStorage?.getItem(THEME_LOCALSTORAGE_KEY) as Theme;
+		if (!data) {
+			data = getInferredDefaultTheme();
+		}
+		set(data);
+		if (data === 'dark') {
+			document.querySelector('html')?.classList.add('dark');
+		}
+	}
+
+	subscribe((value) => {
+		if (browser()) {
+			localStorage?.setItem(THEME_LOCALSTORAGE_KEY, value);
+		}
+	});
+
+	function toggle() {
+		update((state) => {
+			state = state === 'dark' ? 'light' : 'dark';
+			return state;
+		});
+		document.querySelector('html')?.classList.toggle('dark');
+	}
+
+	return {
+		subscribe,
+		toggle
+	};
+}
+
+export const theme = createThemeStore();

packages/ui/src/lib/index.ts

@@ -1,5 +1,6 @@
 // Component exports
 export { NavBar } from './components/nav';
+export { ThemeToggle, theme } from './components/theme';
 export { Toast, Toasts, toast } from './components/toast';
 export { Description, List, Title } from './components/typography';
 export { default as Alert, type AlertVariants } from './components/Alert.svelte';

packages/ui/src/lib/utilities.ts

@@ -55,3 +55,9 @@ export function toIcon(value: unknown, extras?: { loading?: boolean }): IconSour
 			return undefined;
 	}
 }
+
+/**
+ * Helper function to check if running in browser
+ * @returns true when running in browser, false otherwise
+ */
+export const browser = () => typeof window !== 'undefined';