在定义配色方案或设计系统时…

当需要决定产品采用浅色/深色/双模式配色，或判断是否该提供主题切换器时使用。

适用场景

解决思路

1. 把配色模式当作品牌与场景决策，而非个人偏好，要有意识地做出选择。
2. 浅色（white design）：调性开放、可信、内容优先、易访问、专业；适合营销站、电商、编辑类、混合受众 SaaS、消费产品、以内容为重点的 B2B 工具；是大多数产品的更安全默认值，在明亮环境下表现更好且开箱即用的无障碍覆盖更广。
3. 深色（dark design）：调性高端、专注、沉浸、技术感、高对比数据；适合交易平台、开发者工具、创意工具（视频/音频编辑器）、密集可视化数据看板、娱乐、游戏；可减少低光环境下长时间使用的眼疲劳，并让彩色数据可视化（图表、热力图）更突出。
4. 深色需谨慎：低对比文字、过饱和品牌色、表面层次不足是常见失败；若团队无法妥善维护，浅色优于一个坏掉的深色模式。
5. 组合模式（系统默认 + 手动覆盖）：尊重 prefers-color-scheme 让操作系统设定默认值，并为想覆盖的用户提供切换开关；这是有回访用户群的现代标准做法。
6. 组合模式实现：用 @media (prefers-color-scheme: dark) 和 @media (prefers-color-scheme: light) 在 :root 上设置对应 token，再用 [data-theme="dark"] 与 [data-theme="light"] 做手动覆盖。
7. 主题选择器是 UI 控件，占空间且增加复杂度，只在用户控制真正重要时才构建。
8. 营销站、落地页：不提供选择器，选定一种模式并坚持。
9. 消费级 SaaS、大众受众：组合模式（系统默认 + 切换）。
10. 开发者工具、技术产品：提供，开发者会预期有。
11. 交易平台、金融看板：提供，长时间使用、低光场景常见。
12. B2B 企业工具（ERP、分析）：提供，高级用户、长会话、个人偏好各异。
13. 电商店面：通常不提供，浅色默认，或可考虑系统默认。
14. 创意工具（设计、视频、音频）：提供，深色常被偏好，切换仍被预期。
15. 规则：若用户每天会花数小时在工具中，就给他们控制权；若是一次性或偶发使用的产品，选定符合品牌的模式即可。
16. 把主题切换器放在页眉（右上角、靠近账户处）或用户设置中，不要放在主导航里。
17. 让品牌既有视觉识别影响默认模式：干净、极简、可信、开放 → 浅色；高端、独享、大胆、沉浸 → 深色；技术、数据密集、精确 → 深色；活泼、多彩、有活力 → 浅色（鲜艳品牌色下深色更难维护）；中性、企业、功能型 → 浅色并配系统默认切换。
18. 若品牌使用很深的原色（藏青、深绿、近黑），深色模式能自然凸显它；若品牌围绕明亮鲜艳的原色构建，浅色模式让它呼吸。
19. 主题切换器是第二套调色板，不是开关：每个语义颜色都需要在每种模式下有经验证的值，而不是用一个算法翻转同一个值；浅色下通过的对比度在深色下常会失败，饱和度和高度感读起来也不同。
20. 深色模式不是简单反色，避免常见错误：不要用纯黑 #000000 作为基础表面，改用很深的neutral（#0A0A0F、#111827）来营造深度。
21. 深色模式的表面层级用明度而非阴影：基础、+1、+2 表面逐级变亮，而不是加更多阴影。
22. 略微降低品牌色饱和度：鲜艳颜色在深色背景上可能视觉上过于刺激，降低 10–15% 饱和度可保持可读性。
23. 反色文字增加字重：深色背景上的浅色文字常显得比浅色模式下同字重更细，增加一档字重（如 Regular 到 Medium，或 Medium 到 Semibold）以保持易读性。
24. 文字对比度需要主动验证：深色表面上的浅色文字不会自动符合 WCAG，需检查所有组合。
25. 字面量等于 token 的值时，它就是那个 token：当硬编码颜色恰好匹配当前主题下某 token 的解析值时，这不是巧合也不是局部选择，而是那个 token 以无法跟随主题的形式写了出来；损害会以反转而非缺失的形式出现——一个被冻结在深色模式值的表面在浅色模式下不只是看起来不对，还会反转与相邻元素的关系，原本下沉的变成凸起、原本后退的变成前进；布局仍渲染、不报错，唯一反馈是有人说某屏感觉不对。
26. 不要靠纪律来避免硬编码颜色，因为字面量从构造上就对所有 token 审计不可见；要机械化处理：在标记中 grep 字面颜色值，把数量当作有数字的债务，归零后对新出现的字面量让构建失败。
27. 任何在 grep 后仍存活的字面量都需要书面理由，而“反正它和 token 一样”是唯一永远无效的理由。
28. 深色模式表面色阶示例：--color-surface: #0A0A0F（基础）；--color-surface-raised: #141419（卡片）；--color-surface-overlay: #1E1E26（模态、弹出层）；--color-border: rgba(255,255,255,0.08)；--color-text: #F0F0F5；--color-text-secondary: #8A8F98。
29. 评审清单：配色模式选择是否基于品牌调性与使用场景且有意识？
30. 评审清单：若为组合模式，prefers-color-scheme 是否设定了默认值？
31. 评审清单：若构建了主题选择器，是否放在低调但可访问的位置？
32. 评审清单：深色模式下表面是否通过明度阶梯而非仅靠阴影区分？
33. 评审清单：深色模式下品牌色是否略微降饱和以避免视觉刺激？
34. 评审清单：两种模式下所有文字/背景对比度是否都验证通过（WCAG 2.2 AA）？
35. 评审清单：反色文字（浅色在深色上）是否增加一档字重以保持视觉易读性？
36. 评审清单：是否避免用纯黑 #000000 作为深色模式基础表面？

适用边界 · 注意事项

• 营销站、落地页、电商店面等一次性或偶发使用的产品，不需要主题选择器，选定一种符合品牌的模式即可。
• 若团队无法妥善维护深色模式（低对比文字、过饱和品牌色、表面层次不足），不要做深色模式，浅色优于一个坏掉的深色模式。
• 不要用算法翻转单一颜色值来生成第二套主题，每个语义颜色都需要在每种模式下有经验证的值。