feat: light/dark/system mode switcher (#1081)

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"
 }

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);

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}

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>

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}