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

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>