深色模式Dark Mode

深色模式实验台：整套 token 成对切换

任务是为「CodeNow 工作台·设置卡」切主题。选亮色 / 暗色 / 系统三种策略，切到系统时用模拟偏好看物件跟随；再点「套全局反色滤镜」看图表、代码块和对比度一起塌。结果长在物件上——背景、正文、边框、图表、代码块、阴影↔边框都跟着切换。

面板里读到的结论

刚才物件上整套 token 的切换，对应的是这几条主线：成对切换、阴影改边框、系统与手动策略、对比度独立复核、不用全局反色。

• 整套语义 token 切换：背景、正文、边框、图表、代码块在浅色与暗色各有一套值，组件只引用 token，不是把页面反色。
• 阴影在暗色失效：黑色阴影压在深背景上几乎看不见，改用边框 + 弱阴影维持轮廓和层级，而不是把阴影加得更黑。
• 三种策略：亮色、暗色是手动覆盖；系统模式读取 prefers-color-scheme，手动选择优先级高于系统。
• 对比度逐对复核：浅色达标的搭配在暗色不一定成立，正文、辅助文字、图表、代码块都要单独验收（WCAG AA）。
• 图表与图片要重取色：直接反色会让品牌色错位、图片发灰；要为暗色单独定图表色板或加半透明底。
• 禁用全局反色滤镜：filter: invert(1) 看似一行搞定，但破坏语义 token、图片和对比度，不可维护。

什么时候专门做深色模式

看到夜间/低光阅读、用户希望跟随系统、OLED 省电或长时间盯屏疲劳时做；只为跟风加一层反色、不愿重校对比度的场景别做。

怎么从组件走到两套 token

从「这个组件在暗色下每个部位各应该是什么」倒推 token，再逐对验收。

1. 定义语义 token：用 --bg、--text、--border、--chart-1、--code-bg 等角色名，而不是写死色值。
2. 为浅色和暗色各写一套值：浅色一套、暗色一套，用 [data-theme] 或 prefers-color-scheme 切换变量。
3. 提供亮 / 暗 / 系统三种策略：系统模式默认读 prefers-color-scheme，手动选择写入存储并覆盖系统。
4. 组件只引用 token：背景、文字、边框、图表、代码块都从变量取值，不在组件里写色值。
5. 为暗色重定阴影与图表：阴影改边框 + 弱阴影，图表色板单独取色，图片加半透明底或暗色版本。
6. 逐对复核对比度：在两种主题下实测正文、辅助文字、链接、图表、代码块对各自背景的对比度。

盯这些关注点

做深色模式时常只盯「背景够不够暗」，图表错位、阴影被吞、对比度塌掉更容易出问题。

• 盯图表与图片：直接反色会让品牌色和图表错位；要为暗色单独取色或提供暗色版图片。
• 盯阴影被吞：黑色阴影在深背景上不可见；改边框或提亮表面色，而不是加深阴影。
• 盯对比度：浅色达标的文字在暗色可能发灰；辅助文字、链接、代码块要逐对验收。
• 盯系统与手动：系统模式要跟随偏好，手动选择要显示来源并持久化，刷新后按产品规则恢复。
• 盯反色滤镜：filter: invert(1) 是应急不是方案；它会破坏 token、图片和可访问性。

同一张设置卡：正例与反例

目标都是让工作台在暗色下可读。差异只在用「token 成对切换」还是「全局反色滤镜」。