d637f0a849
六套文档主题各加一组同气质的界面变量（data-doc-theme 驱动），选什么 主题，标题栏/菜单/侧边栏/状态栏就穿什么配色；界面跟随当前生效主题 （含单文档临时主题）。视图「深色主题」开关撤下，明暗并入主题； data-theme 退化为 paperTone 派生信号供 Mermaid/源码编辑器读取。
31 lines
1.7 KiB
Markdown
31 lines
1.7 KiB
Markdown
# 主题整套联动（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 全量通过；构建通过。
|