feat: 接入深色配色(浅色 / 深色 / 跟随系统)
- settings.site 新增 theme,落在 <html data-scheme> 上 - 深色完全由组件库的令牌块接管,页面与组件都不用改 - 后台「页头 → 配色」可选,保存后前后台即时切换 - 顶部背景图是浅色渐变图,深色下隐藏(.site-background)
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user