feat: 支持深色主题 (#557)

2025-12-06 01:44:13 +08:00
parent 6391aa67c0
commit 930660045f
5 changed files with 40 additions and 3 deletions
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -5,6 +5,22 @@
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="referrer" content="no-referrer" />
+		<script>
+			(function () {
+				function getThemePreference() {
+					const saved = localStorage.getItem('mode-watcher-mode');
+					if (saved && (saved === 'light' || saved === 'dark')) {
+						return saved;
+					}
+					return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+				}
+				const theme = getThemePreference();
+				if (theme === 'dark') {
+					document.documentElement.classList.add('dark');
+				}
+				document.documentElement.style.colorScheme = theme;
+			})();
+		</script>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
--- a/web/src/lib/components/app-sidebar.svelte
+++ b/web/src/lib/components/app-sidebar.svelte
@@ -8,7 +8,9 @@
 	import UserIcon from '@lucide/svelte/icons/user';
 	import Settings2Icon from '@lucide/svelte/icons/settings-2';
 	import SquareTerminalIcon from '@lucide/svelte/icons/square-terminal';
+	import PaletteIcon from '@lucide/svelte/icons/palette';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import { mode, toggleMode } from 'mode-watcher';
 	import type { ComponentProps } from 'svelte';

 	let sidebar = Sidebar.useSidebar();
@@ -136,6 +138,22 @@
 	<Sidebar.Footer>
 		<Sidebar.Separator />
 		<Sidebar.Menu>
+			<Sidebar.MenuItem>
+				<Sidebar.MenuButton class="h-8">
+					{#snippet child({ props })}
+						<button
+							{...props}
+							onclick={() => {
+								toggleMode();
+								closeMobileSidebar();
+							}}
+						>
+							<PaletteIcon class="size-4" />
+							<span class="text-sm">{mode.current === 'light' ? '亮色' : '暗色'}</span>
+						</button>
+					{/snippet}
+				</Sidebar.MenuButton>
+			</Sidebar.MenuItem>
 			{#each data.footer as item (item.title)}
 				<Sidebar.MenuItem>
 					<Sidebar.MenuButton class="h-8">
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -6,8 +6,10 @@
 	import { breadcrumbStore } from '$lib/stores/breadcrumb';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import { Toaster } from '$lib/components/ui/sonner/index.js';
+	import { ModeWatcher } from 'mode-watcher';
 </script>

+<ModeWatcher disableHeadScriptInjection />
 <Toaster />
 <Sidebar.Provider>
 	<AppSidebar />