diff --git a/stash-web/src/AppNext.tsx b/stash-web/src/AppNext.tsx index 2d5e95e..136c85d 100644 --- a/stash-web/src/AppNext.tsx +++ b/stash-web/src/AppNext.tsx @@ -6,7 +6,6 @@ import { SearchField, Space, Toaster, - toast, type MenuItem, } from '@stash/ui' import { useEffect, useMemo, useRef, useState } from 'react' @@ -27,10 +26,15 @@ import { useProjects } from './useProjects' import { fetchSession, logout, type SessionState } from './auth' import { fetchSettings, - saveSettings, type SettingsDocument, type SiteSettings, } from './settings' +import { + isDarkScheme, + readThemeOverride, + writeThemeOverride, + type ThemeChoice, +} from './theme' import { appDetailModel, posterDetailModel, @@ -295,30 +299,25 @@ export default function AppNext() { const keywordLower = keyword.trim().toLowerCase() - // 配色:写在 上,深色由组件库的令牌块接管 + // 配色:本机偏好优先于站点默认,写在 上, + // 深色由组件库的令牌块接管,页面与组件都不用改 + const [themeOverride, setThemeOverride] = useState(() => + readThemeOverride(), + ) + const effectiveTheme = themeOverride ?? site.site.theme + useEffect(() => { - document.documentElement.dataset.scheme = site.site.theme - }, [site.site.theme]) + document.documentElement.dataset.scheme = effectiveTheme + }, [effectiveTheme]) /** 当前实际是深色吗(auto 时按系统偏好算) */ - const isDark = - site.site.theme === 'dark' || - (site.site.theme === 'auto' && - window.matchMedia('(prefers-color-scheme: dark)').matches) + const isDark = isDarkScheme(effectiveTheme) - /** 页头的明暗切换:写回站点设置,前后台一起变;只有登录后才会显示 */ - const toggleTheme = async () => { - if (settings === null) return - const next = isDark ? 'light' : 'dark' - const result = await saveSettings(settings.version, { - ...settings.settings, - site: { ...settings.settings.site, theme: next }, - }) - if (result.ok) { - setSettings(result.document) - return - } - toast.error(result.error) + /** 页头的明暗切换:只写本机偏好,不需要登录;站点默认值在后台改 */ + const toggleTheme = () => { + const next: ThemeChoice = isDark ? 'light' : 'dark' + setThemeOverride(next) + writeThemeOverride(next) } // 站点级设置:浏览器标签标题与 favicon(空值回落到内置) diff --git a/stash-web/src/components/admin/AdminNext.tsx b/stash-web/src/components/admin/AdminNext.tsx index 8699f15..54c5ab7 100644 --- a/stash-web/src/components/admin/AdminNext.tsx +++ b/stash-web/src/components/admin/AdminNext.tsx @@ -26,6 +26,7 @@ import { useEffect, useMemo, useState } from 'react' import { changePassword, fetchSession, logout, type SessionState } from '../../auth' import { LoginDialog } from '../auth/LoginDialog' import { GroupMark as GroupGlyph } from '../common/GroupMark' +import { isDarkScheme, readThemeOverride, writeThemeOverride } from '../../theme' import { fetchSettings, saveSettings, @@ -135,7 +136,8 @@ export function AdminNext() { if (meta === undefined) return const title = meta.title.trim() if (title !== '') window.document.title = title - window.document.documentElement.dataset.scheme = meta.theme + // 本机偏好优先于站点默认,跟前台一致 + window.document.documentElement.dataset.scheme = readThemeOverride() ?? meta.theme const href = meta.favicon.trim() === '' ? '/favicon.svg' : meta.favicon.trim() let link = window.document.head.querySelector('link[rel="icon"]') if (link === null) { @@ -178,15 +180,15 @@ export function AdminNext() { toast.success('侧边栏已保存') } - /** 页头的明暗切换:写回 site.theme,前后台一起变 */ + /** 页头的明暗切换:改的是站点默认值,并清掉本机偏好,保证点完看到的就是新默认 */ const themeSetting = draft?.site.theme ?? document?.settings.site.theme ?? 'auto' - const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches - const isDark = themeSetting === 'dark' || (themeSetting === 'auto' && prefersDark) + const isDark = isDarkScheme(readThemeOverride() ?? themeSetting) const toggleTheme = async () => { if (document === null || draft === null) return const next = isDark ? 'light' : 'dark' setSaving(true) + writeThemeOverride(null) const result = await saveSettings(document.version, { ...draft, site: { ...draft.site, theme: next }, diff --git a/stash-web/src/theme.ts b/stash-web/src/theme.ts new file mode 100644 index 0000000..ccc67ee --- /dev/null +++ b/stash-web/src/theme.ts @@ -0,0 +1,35 @@ +/** + * 明暗主题的「本机偏好」。 + * + * 站点设置里的 `site.theme` 是**所有人**的默认值;这里的 localStorage 是**这台浏览器** + * 的选择,读到时优先于默认值。前台页头的切换按钮只改本机偏好,不需要登录; + * 后台「页头 → 配色」改的是站点默认值。 + */ +export type ThemeChoice = 'light' | 'dark' + +const STORAGE_KEY = 'stash-theme' + +export function readThemeOverride(): ThemeChoice | null { + try { + const value = window.localStorage.getItem(STORAGE_KEY) + return value === 'light' || value === 'dark' ? value : null + } catch { + return null + } +} + +export function writeThemeOverride(value: ThemeChoice | null): void { + try { + if (value === null) window.localStorage.removeItem(STORAGE_KEY) + else window.localStorage.setItem(STORAGE_KEY, value) + } catch { + // 隐私模式下 localStorage 可能不可写,忽略即可 + } +} + +/** `light` / `dark` / `auto` 里,当前实际是不是深色 */ +export function isDarkScheme(scheme: string): boolean { + if (scheme === 'dark') return true + if (scheme === 'light') return false + return window.matchMedia('(prefers-color-scheme: dark)').matches +}