From d5e0cfd4a6d9a9d6d916d561ea5cac9153cc3857 Mon Sep 17 00:00:00 2001
From: Kyle Mendell <kmendell@ofkm.us>
Date: Sun, 9 Nov 2025 13:28:58 -0600
Subject: [PATCH] feat: light/dark/system mode switcher (#1081)

---
 frontend/messages/en.json                     |  5 ++-
 frontend/src/app.css                          |  6 ++++
 .../src/lib/components/header/header.svelte   |  2 ++
 .../components/header/mode-switcher.svelte    | 32 +++++++++++++++++++
 .../src/lib/components/ui/alert/alert.svelte  |  4 +--
 5 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/lib/components/header/mode-switcher.svelte

diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index 338c4c0d..21e184be 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -462,5 +462,8 @@
 	"ldap_id": "LDAP ID",
 	"reauthentication": "Re-authentication",
 	"clear_filters": "Clear Filters",
-	"default_profile_picture": "Default Profile Picture"
+	"default_profile_picture": "Default Profile Picture",
+	"light": "Light",
+	"dark": "Dark",
+	"system": "System"
 }
diff --git a/frontend/src/app.css b/frontend/src/app.css
index 07092cdf..19e5f8d2 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -36,6 +36,8 @@
 	--accent: oklch(0.97 0 0);
 	--accent-foreground: oklch(0.205 0 0);
 	--destructive: oklch(0.577 0.245 27.325);
+	--warning: oklch(0.96 0.06 85);
+	--warning-foreground: oklch(0.32 0.07 70);
 	--border: oklch(0.922 0 0);
 	--input: oklch(0.922 0 0);
 	--ring: oklch(0.708 0 0);
@@ -70,6 +72,8 @@
 	--accent: oklch(0.269 0 0);
 	--accent-foreground: oklch(0.985 0 0);
 	--destructive: oklch(0.704 0.191 22.216);
+	--warning: oklch(0.42 0.09 70);
+	--warning-foreground: oklch(0.93 0.03 85);
 	--border: oklch(1 0 0 / 10%);
 	--input: oklch(1 0 0 / 15%);
 	--ring: oklch(0.556 0 0);
@@ -114,6 +118,8 @@
 	--color-accent-foreground: var(--accent-foreground);
 	--color-destructive: var(--destructive);
 	--color-destructive-foreground: var(--destructive-foreground);
+	--color-warning: var(--warning);
+	--color-warning-foreground: var(--warning-foreground);
 	--color-ring: var(--ring);
 	--color-radius: var(--radius);
 	--color-sidebar-background: var(--sidebar-background);
diff --git a/frontend/src/lib/components/header/header.svelte b/frontend/src/lib/components/header/header.svelte
index 8712aec4..bfd0eb22 100644
--- a/frontend/src/lib/components/header/header.svelte
+++ b/frontend/src/lib/components/header/header.svelte
@@ -4,6 +4,7 @@
 	import userStore from '$lib/stores/user-store';
 	import Logo from '../logo.svelte';
 	import HeaderAvatar from './header-avatar.svelte';
+	import ModeSwitcher from './mode-switcher.svelte';
 
 	const authUrls = [
 		/^\/authorize$/,
@@ -38,6 +39,7 @@
 			{/if}
 		</div>
 		<div class="flex items-center justify-between gap-4">
+			<ModeSwitcher />
 			{#if $userStore?.id}
 				<HeaderAvatar />
 			{/if}
diff --git a/frontend/src/lib/components/header/mode-switcher.svelte b/frontend/src/lib/components/header/mode-switcher.svelte
new file mode 100644
index 00000000..61331c01
--- /dev/null
+++ b/frontend/src/lib/components/header/mode-switcher.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import SunIcon from '@lucide/svelte/icons/sun';
+	import MoonIcon from '@lucide/svelte/icons/moon';
+
+	import { mode, resetMode, setMode } from 'mode-watcher';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { m } from '$lib/paraglide/messages';
+
+	const isDark = $derived(mode.current === 'dark');
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger class={buttonVariants({ variant: 'ghost', size: 'icon' })}>
+		<SunIcon
+			class="h-[1.2rem] w-[1.2rem] !transition-all {isDark
+				? '-rotate-90 scale-0'
+				: 'rotate-0 scale-100'}"
+		/>
+		<MoonIcon
+			class="absolute h-[1.2rem] w-[1.2rem] !transition-all {isDark
+				? 'rotate-0 scale-100'
+				: 'rotate-90 scale-0'}"
+		/>
+		<span class="sr-only">Toggle theme</span>
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Item onclick={() => setMode('light')}>{m.light()}</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={() => setMode('dark')}>{m.dark()}</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={() => resetMode()}>{m.system()}</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
diff --git a/frontend/src/lib/components/ui/alert/alert.svelte b/frontend/src/lib/components/ui/alert/alert.svelte
index 32a5fbf5..f5ad95fb 100644
--- a/frontend/src/lib/components/ui/alert/alert.svelte
+++ b/frontend/src/lib/components/ui/alert/alert.svelte
@@ -10,7 +10,7 @@
 				destructive:
 					'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current',
 				warning:
-					'bg-amber-100 text-amber-900 dark:bg-amber-900 dark:text-amber-100 [&>svg]:text-amber-900 dark:[&>svg]:text-amber-100'
+					'bg-warning text-warning-foreground border-warning/40 [&>svg]:text-warning-foreground'
 			}
 		},
 		defaultVariants: {
@@ -67,7 +67,7 @@
 	>
 		{@render children?.()}
 		{#if dismissibleId}
-			<button onclick={dismiss} class="absolute top-0 right-0 m-3 text-black dark:text-white"
+			<button onclick={dismiss} class="absolute right-0 top-0 m-3 text-black dark:text-white"
 				><LucideX class="size-4" /></button
 			>
 		{/if}