bf1942/bili-sync-ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ᴀᴍᴛᴏᴀᴇʀ
2025-12-06 01:44:13 +08:00
committed by GitHub
parent 6391aa67c0
commit 930660045f
5 changed files with 40 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/bun.lock
View File

@@ -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=="],

2
web/package.json
View File

@@ -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",

16
web/src/app.html
View File

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

18
web/src/lib/components/app-sidebar.svelte
View File

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

2
web/src/routes/+layout.svelte
View File

@@ -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 />