暗黑模式既是视觉风格也是可用性策略：先定义色板与语义颜色，保证对比度合规并顾及弱视用户；处理图像、边框、阴影以减少噪点；支持系统主题与手动切换，做好过渡与状态持久化；对动画、品牌色和本地化做适配，测试不同亮度与设备，监测性能与使用数据，持续迭代优化。注重无障碍标准（WCAG）、国际化和主题一致性落地性
为什么要做暗黑模式（别只是因为潮）
很多团队把暗黑模式当成设计潮流，但它真正的价值在于：改善低光环境下的可读性与舒适度、延长 OLED 设备电池寿命（在纯黑背景时）并提供差异化体验。用户在夜间或弱光场景切换到暗色主题后，会更容易集中注意力，减少眩光。这并不意味着把白底翻成黑底就完事了——如果处理得不对，暗黑模式会降低信息识别速度、破坏品牌感、甚至带来可访问性问题。
设计原则：把复杂问题拆成简单模块
按费曼写法，先把暗黑模式拆成几件能独立解决的小事：
- 语义色（Semantic tokens）：将颜色按用途命名（背景、表面、文本主、文本次、危险、成功等）。
- 对比与可访问性：确保文本与交互元素满足 WCAG 对比要求。
- 图像与插图：为图片、渐变与阴影设计暗模式版本或滤镜策略。
- 系统与用户控制：支持 prefers-color-scheme 与用户手动切换，并持久化选择。
- 性能与测试：避免引入额外渲染负担，覆盖不同环境与语言测试。
语义化比固定色值更重要
把颜色做成语义 token（例如：–color-bg, –color-surface, –color-text-primary）能让你在切换时只改语义层，不用在组件里到处找色值。这样也便于做主题一致性与本地化适配。
色彩策略（含具体示例）
暗黑模式不是把所有颜色变暗。常见错误是把全部色彩线性反转，导致对比失衡与视觉噪声。正确做法：
- 使用较低色温与低饱和度的背景色（纯黑除非你确实需要 OLED 节能）。
- 保留品牌色，但在暗背景下降低亮度或增加边界（outline）以保证可读性。
- 给强调色更多亮度差：暗背景上，强调色要适当更亮以突显。
| 语义 Token | Light | Dark | 建议说明 |
| –color-bg | #FFFFFF | #0F1113 | 整体背景，非纯黑可以减少高亮反差 |
| –color-surface | #F6F7F8 | #141617 | 卡片、浮层背景，区分层级 |
| –color-text-primary | #111827 | #E6EEF3 | 主体文本，保证至少 4.5:1 对比 |
| –color-muted | #6B7280 | #9CA3AF | 次要文本，不能太靠近背景 |
| –color-accent | #0066FF | #4DA3FF | 强调色，暗色下可适当提亮 |
对比度和 WCAG 要点
WCAG 推荐正文至少 4.5:1（普通文本），大号文本至少 3:1，图标与交互组件也要满足可点击区域和色彩区分。一个实用技巧是用 语义对比矩阵：在设计稿里列出常见前景/背景组合并测算对比度，优先调整那些不合格的组合。
图像、插画与图标的处理
图像往往是暗模式的难点：
- 位图照片：通常保留原色，但可添加柔和的遮罩或微调亮度；避免直接把照片反色或大幅压暗。
- 插画与矢量：为暗模式单独绘制版本，或使用可变颜色（例如把填充色换成亮色轮廓）。
- 图标：使用可变的图标色或带有半透明背景的白色图标，保证在浅色/深色下都可识别。
示例：图像处理策略（三种方式）
- 保留原图 + 深色蒙版（overlay）以统一调性。
- 使用反差更强的图标或描边版本。
- 为关键宣传图维护两套素材（light/dark），虽然成本更高但效果最好。
实现要点：CSS 与系统集成
实现层面分两步：先检测系统主题，再提供用户控制。最常见的实现就是 CSS 的 prefers-color-scheme 配合自定义属性。
/* 基本思路 */
:root {
--color-bg: #ffffff;
--color-text-primary: #111827;
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #0F1113;
--color-text-primary: #E6EEF3;
}
}
/* 手动切换时将主题类添加到 */
此外，切换主题时请用 过渡 而不是瞬间切换某些属性（如背景色），但要谨慎：大面积过渡会引起重绘，影响性能。通常只对颜色使用短时间（120ms-200ms）的过渡。
品牌色与暗黑模式的矛盾
品牌色在浅色 UI 中表现良好，但在暗色 UI 中可能显得刺眼或黯淡。策略包括：
- 保留色相但降低饱和度或调整亮度。
- 在暗背景下给按钮加微弱边框或阴影来提高可点击感。
- 对于logo，准备一套反转或单色版本。
动效、阴影与界面层级
阴影在暗色背景下会失真或看不清。常见做法：
- 在暗色模式减少阴影的模糊值，改用细微的边框或半透明表面区分层级。
- 动效速度不要太慢，夜间用户更容易认为界面卡顿；但同时避免过强的闪烁或过渡（对敏感用户不友好）。
国际化与无障碍（与翻译/本地化的关联）
暗黑模式会影响不同语言的可读性：例如某些字体在暗色背景下的笔画细节会丢失，阿拉伯文、印地文或泰文在较小字号下更脆弱。要点：
- 和本地化团队协作，测试目标语言的真实文案，特别是长文本与换行。
- 为 RTL（右到左）语言测试交互元素的镜像效果，注意图标方向与对比。
- 评估不同语言环境下的字号、行距与字重需求，避免统一套数值带来可读性问题。
测试矩阵：别只在桌面上验收
设计好只是第一步，测试要覆盖多个维度：
- 设备：iOS、Android、Windows、macOS、WebKit 与 Chromium 不同实现存在细微差别。
- 亮度：从暗室到户外直射，确认文本、按钮在各种亮度下都可识别。
- 无障碍工具：使用屏幕放大器、对比度检测器、以及色盲模拟器进行测试。
- 性能：切换主题时的帧率、重绘次数以及内存占用。
Q/A 列表（实际可复用）
- 所有文本组合是否满足 WCAG 对比度要求？
- 图标在深浅主题下是否都清晰可见？
- 品牌 logo 在暗色背景下是否需要单独素材？
- 主题切换会不会导致焦点丢失或触发不可预期的动画？
- 是否为不同语言准备了额外的可视化测试？
上线策略与数据指标
不要一次性全量推；可以分阶段验证假设：
- A/B 测试：不同用户组看到不同的默认主题设置或切换提示。
- 指标监测：页面停留时间、跳出率、错误率、可访问性相关的客服投诉数。
- 反馈机制：在暗黑模式体验页放置反馈入口，特别针对可读性、颜色异常问题。
常见坑与经验教训（实话实说）
- 坑：把文字变成纯白会在黑色背景上产生“眩光”，实际应使用接近白但有微蓝/灰的色值。
- 坑：统一降低饱和度导致品牌色失去识别度，通常需要为品牌色单独调优。
- 经验：把关键组件（按钮、输入框）作为优先级最高的适配对象，用户交互出问题的代价最高。
- 经验：早期与工程团队约定好主题切换的技术实现细节，会减少手动修复的工作量。
实用清单（交付给产品/工程/设计）
- 建立语义颜色表与 token，并同步到设计系统。
- 准备 light/dark 两套关键素材（logo、关键插画、重要图标）。
- 实现 prefers-color-scheme 并提供用户手动切换入口，保存到 localStorage 或账户设置。
- 列出对比度不足的颜色组合并优先修复。
- 在 QA 测试计划里加入语言、设备、亮度和无障碍工具测试项。
小贴士（那些看起来不重要但很救火的细节）
- 文本阴影：在暗色背景上轻微的文本阴影能提升可读性，但不要过大。
- 表单输入占位符：在暗色下占位符通常要比浅色模式更浅，但不要太浅以致不可见。
- 禁用状态：不要只靠灰度区分，考虑加入图标或微交互动效提示。
- 可选择纯黑（#000000）还是深灰（#0F1113），依据是否希望节省 OLED 电量并兼顾肤色表现。
参考与工具（便于复查）
- WCAG 2.1 对比度计算方法（标准文档）。
- 颜色辅助工具：Contrast Checker、Color Oracle（色盲模拟器）。
- 浏览器支持：注意不同浏览器对 prefers-color-scheme 的支持细节。
写到这里想到的点先列出来，留着做交付清单——有些工程细节和素材我还想再具体列几个实际的色值案例和切换时的动画参数，回头把那些例子补上。就这样，先到这儿，回头再补点例子。