feat: 前台明暗切换改为本机偏好,不再要求登录
- 新增 src/theme.ts:localStorage 的 stash-theme 作为本机偏好,优先于站点默认 - 前台页头的月亮/太阳只写本机偏好,未登录也能用,刷新后保持 - 后台「页头 → 配色」与后台页头按钮改的是站点默认值;后台按钮同时清掉本机偏好, 保证点完看到的就是新默认 - 两个壳都按「本机偏好 ?? 站点默认」决定 data-scheme
This commit is contained in:
+21
-22
@@ -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()
|
||||
|
||||
// 配色:写在 <html data-scheme> 上,深色由组件库的令牌块接管
|
||||
// 配色:本机偏好优先于站点默认,写在 <html data-scheme> 上,
|
||||
// 深色由组件库的令牌块接管,页面与组件都不用改
|
||||
const [themeOverride, setThemeOverride] = useState<ThemeChoice | null>(() =>
|
||||
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(空值回落到内置)
|
||||
|
||||
Reference in New Issue
Block a user