深色主题设计系统 是做什么的？
目的
深色主题设计系统技能提供了一种将浅色主题Web界面转换为深色主题对应界面的方法论。设计深色模式并非简单地反转颜色值。这样做会破坏物理光照隐喻，导致严重的视觉疲劳，并产生难以阅读、高眩光的界面。
本系统确立了低光环境下的视觉和空间规则：
- 高度反转： 在深色模式中，通过提亮高表面背景而非使用深色阴影来传达深度。
- 颜色去饱和： 将鲜艳的品牌和语义强调色调整为低对比度水平，以防止视觉“振动”和眼疲劳。
- 对比度与光晕预防： 避免纯白配纯黑的组合，这种组合会对散光或阅读障碍者造成极端眩光（光晕），转而使用偏白色和偏黑色。
- 排版权重校准： 抵消“光渗”效应（即浅色文本在深色背景上看起来比深色文本在浅色背景上更粗更重的光学错觉）。
- 媒体调暗： 调整图片、视频和矢量图，使其在低光条件下不会“刺瞎”用户的眼睛。
使用场景
- 设计双主题UI套件： 为原生支持浅色和深色模式的系统建立语义化设计令牌架构。
- 重新设计SaaS仪表盘和阅读环境： 创建专为长时间观看、开发者工作流或夜间使用而优化的低疲劳界面。
- 审核不可访问的深色主题： 识别并修复对比度问题、振动强调色、不可读的文本权重以及刺眼的媒体资产。
- 提供多主题交接规范： 生成清晰、可直接用于开发的规范，精确显示各元素在不同主题下的表现。
何时不应使用
- 默认深色（影院模式）环境： 如果应用程序完全采用深色（例如Spotify、Netflix或游戏流媒体平台）且永远不支持浅色主题，那么双主题设计系统就是不必要的工作量。
- 高度表达性/艺术性微营销活动： 独立的落地页，其视觉冲击、极端高饱和度调色板或艺术品牌优先于长时间观看的舒适性或严格的无障碍规则。
- 严格的静态遗留框架： 前端架构无法加载动态样式表或缺乏CSS变量支持的应用，从而无法进行系统性的主题适配。
输入
- 浅色模式核心调色板和品牌样式： 现有的主要品牌颜色、次要颜色、排版比例和流动性间距令牌。
- 组件清单和深度层级结构： 页面布局和UI层（背景、侧边栏、卡片、模态框、下拉菜单）的全面列表。
- 光照环境上下文： 目标用户的典型物理环境（例如，夜间睡前阅读，或明亮的工业控制台环境）。
- 无障碍目标： 标准WCAG 2.2 AA（最低要求）或AAA（增强型），包括对散光和色盲的考虑。
输出
- 统一语义化令牌映射表： 将浅色模式的值直接连接到其对应深色模式等价物的系统性规范。
- 基于高度的表面色阶： 一个5到6步的色阶，定义了表面背景值随着其在Z轴上浮得更高而提亮的方式。
- 去饱和强调色调色板： 一套针对深色背景进行了去饱和度调整的校准后的主要、次要和语义状态颜色。
- 排版样式表修正： 针对字体粗细、字间距和文本颜色调整的具体规则，以抵消光渗效应。
- 媒体调暗规范： 用于降低图片对比度/亮度和调整矢量图形的CSS和HTML技术。
工作流程
1. 奠定基础：选择偏黑色和偏白色
避免在背景中使用绝对的#000000（纯黑），在正文中使用绝对的#FFFFFF（纯白）。
- 基准背景： 建立一个深色、带色调的中性色（例如，深石板色、炭灰色或深海军灰，介于
#121212和#1A1A1A之间）。这能减少眼疲劳，防止屏幕闪烁，并保留一些视觉深度。 - 文本基准色： 选择偏白色或浅灰色（例如，
#E2E8F0或#EAEAEA，不透明度为85%到90%）。这能确保舒适的对比度，而不会引起光晕（光线在读者眼中散射）。
2. 通过高度提亮来传达深度
在浅色主题中，我们通过投射更暗的阴影来表示元素被抬高。在深色主题中，深色阴影在深色背景下是不可见的。
- 提亮原则： 随着元素在Z轴上抬得更高，它更接近虚拟环境光源，因此变得更亮，而不是更暗。
- 创建高度表面色阶：
- 级别0（画布基底）： 最深的颜色（例如
#121212）。 - 级别1（卡片/列表项）： 稍微亮一点（例如
#1D1D1D）。 - 级别2（粘性页眉/浮动操作按钮）： 再亮一些（例如
#242424）。 - 级别3（模态框/对话框）： 最亮的表面（例如
#2C2C2C）。
- 级别0（画布基底）： 最深的颜色（例如
- 配合使用柔和的阴影： 在高架层上使用非常微妙的深灰色或半透明的黑色阴影（例如
rgba(0, 0, 0, 0.5)），以在位于级别1项之上的较大表面上提供分离感。
3. 校准和去饱和强调色
高饱和度的颜色在白色画布上看起来很鲜艳，但在深色画布上会“振动”，造成严重的视觉疲劳并且无法通过对比度测试。
- 去饱和品牌强调色： 将品牌颜色转换为更浅、更柔和、更接近粉彩的对应色。（例如，在浅色背景上鲜艳的基准蓝
#0055FF应映射到深色背景上已去饱和的蓝色#66A3FF或#80B3FF）。 - 保持安全的对比度强调色： 验证深色表面上的去饱和强调色仍然满足WCAG 2.2 AA标准（文本至少4.5:1，交互状态3:1）。
- 避免大面积饱和色块： 不要将整个按钮或横幅渲染为纯饱和色，而应谨慎使用——例如文本链接、边框或微妙的指示器。
4. 针对光学光渗调整排版
深色背景上的浅色文本会出现光渗现象——白色文字似乎“渗入”周围的黑暗，使得字母显得比它们在浅色背景上的对应字符更粗、更重、更紧凑。
- 权重校准： 将浅色主题粗体标题的字重减少一级（例如，在深色主题上将
700（粗体）改为600（半粗）甚至500（中等））。 - 字间距校准： 略微增加深色模式正文的字母间距（字距）（例如，
letter-spacing: 0.02em;或0.015em;），以防止单个字母相互粘连。 - 二级/三级层级： 通过调整文本颜色的不透明度（而非仅调整字号）来控制层级。对高优先级正文使用
opacity: 0.87，对次要辅助文本使用opacity: 0.60，对禁用指示器使用opacity: 0.38。
5. 适配媒体和富内容
未经修改的照片、图表和图表可能会以高对比度的白色刺眼用户，从而破坏原本完美的深色模式体验。
- 照片调暗： 对照片应用微妙的亮度和对比度降低，使其融入低光氛围。
[data-theme="dark"] img:not(.avatar) { filter: brightness(0.85) contrast(0.95); } - 矢量资产和插图： 交换SVG中的明亮背景色，或使用SVG滤镜反转特定路径。对于说明性图形，使用
<picture>配合媒体查询加载自定义的深色主题资产。 - 数据可视化： 重新定义图表颜色系列，使用已去饱和的线条和半透明区域填充，使其在不过度发光的情况下保持可读性。
决策规则
高度亮度规则
在确定视觉容器的背景时，请始终参考高度级别。绝不要使高起的模态框或下拉菜单比其下方的页面背景更暗。
| 高度级别 | 浅色模式背景 | 深色模式背景 | 隐含的高度提示 |
|---|---|---|---|
| 级别0（画布） | #FFFFFF（白）或#F8F9FA | #121212（偏黑色） | 地面/基准 |
| 级别1（卡片/区域） | #FFFFFF（白）带边框 | #1E1E1E（表面1） | 浮动1-2dp |
| 级别2（页眉/粘性元素） | #FFFFFF或微妙半透明色调 | #252525（表面2） | 浮动4-8dp |
| 级别3（模态框/对话框） | #FFFFFF带重阴影 | #2D2D2D（表面3） | 浮动12-24dp |
饱和度上限
- 用作交互状态背景的强调色（例如，次要标签容器）在深色模式中的饱和度应为10% 到 15%。
- 用作前景文本或图标的强调色饱和度应为40% 到 60%，以确保它们在深色表面上突出而不会振动。
对比度缓冲
由于屏幕眩光和低质量屏幕对深色模式可见性的影响比浅色模式更严重，请始终以深色模式正文文本的5.0:1对比度比为目标（超过WCAG 4.5:1的最低要求），以作为对恶劣物理环境的缓冲。
约束条件
- 无障碍性（WCAG AA）： 文本元素必须达到至少4.5:1的对比度（大文本为3:1）。UI边框、焦点环和功能图标必须达到至少3:1的对比度。焦点指示器必须保持高度可见，并且不能被深色背景的眩光所淹没（WCAG 2.2 SC 2.4.11）。
- 响应式眩光适应： 文本颜色必须能够承受高环境眩光（例如在户外使用的手机屏幕），这意味着必须避免绝对的最低对比度水平。
- 无纯色层级： 不要仅依赖去饱和颜色的色调来传达状态（例如，图表中的警告 vs. 错误）。应集成独特的图案、文本标签或图标。
常见失败模式
- “文字转置器”： 在浅色主题上运行自动颜色反转滤镜。这会将带有深色阴影的抬起的浅色元素转变为带有发光白色环的凹陷的深色元素，打破所有自然光照模型。
- “振动霓虹灯”噩梦： 将完全饱和的品牌颜色（例如
#00FF00或#FF00FF）直接放在纯黑色背景上。这会引发视觉疲劳，使文本几乎无法阅读超过几秒钟。 - OLED极端情况（纯黑发光）： 在
#000000背景上使用#FFFFFF文本。这会在许多显示器上产生严重的晕轮/眩光效应，降低阅读速度并导致眼疲劳。 - 消失的焦点环： 设计了漂亮的深色模式，但保留了默认的浏览器焦点指示器（通常是深蓝色），在深色石板背景上变得完全不可见。
- 刺眼的插图： 创建了无缝的深色UI，但SVG图表、徽标或说明性图标中保留了高对比度、纯白色的背景。
验证标准
- 基准值： 主画布背景未使用绝对纯黑（
#000），正文未使用绝对纯白（#FFF）。 - 高度模型： 表面在Z轴上抬升得越高，其亮度值逐渐变亮。
- 对比度检查： 每个文本颜色（包括柔和的辅助文本）都满足或超过WCAG 2.2 AA对比度比（4.5:1常规，3:1大文本）。
- 无振动强调色： 强调色和状态色已去饱和，根据应用范围饱和度在10%到60%之间，避免视觉振动。
- 焦点可见性： 交互元素具有高对比度、独特的焦点指示器，在深色表面上清晰可见。
- 排版校准： 对粗体文本进行了调整（降低一级字重或增加字距），以补偿光渗效应。
- 媒体滤镜： 已指定响应式机制（CSS滤镜或深色资产替换），以降低富媒体和矢量资产的亮度和对比度。