feat: 接入深色配色(浅色 / 深色 / 跟随系统)

- settings.site 新增 theme,落在 <html data-scheme> 上
- 深色完全由组件库的令牌块接管,页面与组件都不用改
- 后台「页头 → 配色」可选,保存后前后台即时切换
- 顶部背景图是浅色渐变图,深色下隐藏(.site-background)
This commit is contained in:
2026-11-01 15:41:22 +08:00
parent 8a782099f5
commit 2f2ceb9ea0
5 changed files with 47 additions and 2 deletions
+17 -2
View File
@@ -33,6 +33,7 @@ import {
type SettingsDocument,
type SettingsTone,
type SiteSettings,
type SiteTheme,
} from '../../settings'
import {
createCard,
@@ -126,13 +127,14 @@ export function AdminNext() {
void load()
}, [])
// 后台壳也要吃站点级设置:保存后标签标题 / favicon 立刻变,否则会以为「设了没反应」
// 后台壳也要吃站点级设置:保存后标签标题 / favicon / 配色立刻变,否则会以为「设了没反应」
// 注意:这里的 `document` 是设置文档,浏览器文档要用 `window.document`
useEffect(() => {
const meta = document?.settings.site
if (meta === undefined) return
const title = meta.title.trim()
if (title !== '') window.document.title = title
window.document.documentElement.dataset.scheme = meta.theme
const href = meta.favicon.trim() === '' ? '/favicon.svg' : meta.favicon.trim()
let link = window.document.head.querySelector<HTMLLinkElement>('link[rel="icon"]')
if (link === null) {
@@ -141,7 +143,7 @@ export function AdminNext() {
window.document.head.appendChild(link)
}
link.href = href
}, [document?.settings.site.title, document?.settings.site.favicon])
}, [document?.settings.site.title, document?.settings.site.favicon, document?.settings.site.theme])
const authenticated = session?.authenticated === true
@@ -1762,6 +1764,12 @@ function CardTable({
const TONE_SELECT = TONE_OPTIONS.map((option) => ({ value: option.value, label: option.label }))
const THEME_SELECT = [
{ value: 'auto', label: '跟随系统' },
{ value: 'light', label: '浅色' },
{ value: 'dark', label: '深色' },
]
function HeaderPanel({
value,
onChange,
@@ -1794,6 +1802,13 @@ function HeaderPanel({
onChange={(event) => onChangeSite({ ...site, favicon: event.target.value })}
/>
</FormField>
<FormField label="配色" hint="深色由组件库的令牌块接管,页面与组件都不用改">
<Select
options={THEME_SELECT}
value={site.theme}
onChange={(theme) => onChangeSite({ ...site, theme: theme as SiteTheme })}
/>
</FormField>
<Text size="sm" strong>
首页 Logo