feat(theme): 主题整套联动——界面配色跟随文档主题(docs/22)
六套文档主题各加一组同气质的界面变量(data-doc-theme 驱动),选什么 主题,标题栏/菜单/侧边栏/状态栏就穿什么配色;界面跟随当前生效主题 (含单文档临时主题)。视图「深色主题」开关撤下,明暗并入主题; data-theme 退化为 paperTone 派生信号供 Mermaid/源码编辑器读取。
This commit is contained in:
30
docs/22-theme-linkage.md
Normal file
30
docs/22-theme-linkage.md
Normal file
@@ -0,0 +1,30 @@
|
||||
# 主题整套联动(2026-11-14)
|
||||
|
||||
## 需求
|
||||
|
||||
用户反馈「切换主题,只有文档变了」,拍板选「整套联动」:文档主题什么样,
|
||||
界面配色也跟着成什么样。此前文档主题只作用于编辑区排版,界面另有独立的
|
||||
浅/深开关(视图菜单),两套互不相干。
|
||||
|
||||
## 实现
|
||||
|
||||
- styles.css 为六套文档主题各加一组界面变量(html[data-doc-theme='…']):
|
||||
背景/面板/边框/文字/次级文字/强调色/选中底/悬停/代码底,取自该主题文档
|
||||
配色的气质(GitHub 蓝、Notion 暖灰、简约蓝、深色护眼墨绿深色、专注写作
|
||||
暖纸、经典纸张米色)。默认主题沿用 :root 基础值。原 html[data-theme='dark']
|
||||
界面变量块删除。
|
||||
- 界面跟随的是「当前生效主题」:全局主题,或当前文档的临时主题覆盖——
|
||||
切到设了临时主题的文档,整个窗口跟着换装。
|
||||
- 视图菜单「深色主题」撤下:明暗已并入主题(选深色护眼即整套深色)。
|
||||
ui.theme 偏好字段保留在存量数据里但不再生效。
|
||||
- data-theme 属性保留为明暗派生信号(纸面为深色的主题 = dark),由文档
|
||||
主题的 paperTone 派生,供 Mermaid 渲染主题等 JS 消费方读取;源码编辑器
|
||||
的明暗同样改为按 paperTone 派生,不再回退 ui.theme。
|
||||
|
||||
## 验证
|
||||
|
||||
- 无头浏览器逐个切换 7 套主题,量 body/侧边栏/标题栏计算背景色:与各自
|
||||
设计值逐一吻合(如深色护眼 body #1d221c、纸张 body #f3ecd7、GitHub
|
||||
body #f6f8fa),文档纸面与框架同色系;深色护眼截图全窗墨绿深灰、文字
|
||||
对比正常。
|
||||
- tsc 0 错误;vitest 全量通过;构建通过。
|
||||
Reference in New Issue
Block a user