diff --git a/web/bun.lock b/web/bun.lock
index a4a588f..9e6454e 100644
--- a/web/bun.lock
+++ b/web/bun.lock
@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "my-app",
@@ -23,7 +24,7 @@
         "eslint-plugin-svelte": "^3.0.0",
         "globals": "^16.0.0",
         "layerchart": "2.0.0-next.27",
-        "mode-watcher": "^1.0.6",
+        "mode-watcher": "^1.1.0",
         "prettier": "^3.4.2",
         "prettier-plugin-svelte": "^3.3.3",
         "prettier-plugin-tailwindcss": "^0.6.11",
@@ -553,7 +554,7 @@
 
     "mkdirp": ["mkdirp@3.0.1", "", { "bin": { "mkdirp": "dist/cjs/src/bin.js" } }, "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg=="],
 
-    "mode-watcher": ["mode-watcher@1.0.7", "", { "dependencies": { "runed": "^0.25.0", "svelte-toolbelt": "^0.7.1" }, "peerDependencies": { "svelte": "^5.27.0" } }, "sha512-ZGA7ZGdOvBJeTQkzdBOnXSgTkO6U6iIFWJoyGCTt6oHNg9XP9NBvS26De+V4W2aqI+B0yYXUskFG2VnEo3zyMQ=="],
+    "mode-watcher": ["mode-watcher@1.1.0", "", { "dependencies": { "runed": "^0.25.0", "svelte-toolbelt": "^0.7.1" }, "peerDependencies": { "svelte": "^5.27.0" } }, "sha512-mUT9RRGPDYenk59qJauN1rhsIMKBmWA3xMF+uRwE8MW/tjhaDSCCARqkSuDTq8vr4/2KcAxIGVjACxTjdk5C3g=="],
 
     "mri": ["mri@1.2.0", "", {}, "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="],
 
diff --git a/web/package.json b/web/package.json
index 9676eb9..1015dc4 100644
--- a/web/package.json
+++ b/web/package.json
@@ -21,7 +21,7 @@
 		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
 		"layerchart": "2.0.0-next.27",
-		"mode-watcher": "^1.0.6",
+		"mode-watcher": "^1.1.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
diff --git a/web/src/app.html b/web/src/app.html
index 5ed421c..4ad1a3d 100644
--- 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">
diff --git a/web/src/lib/components/app-sidebar.svelte b/web/src/lib/components/app-sidebar.svelte
index 063a85c..67ea59b 100644
--- 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">
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 5409ac2..c80bfaf 100644
--- 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 />
