怎样支持主题与暗色模式？

保持颜色用途一致，为明暗主题分别选择并检查合适的值。

主题是一组一起使用的视觉选择。暗色模式是其中一种，以较暗背景显示界面；它需要重新安排颜色关系，不能只把所有颜色反过来。

先记住这几件事

• “主要文字”“错误提示”等用途可以保持不变，但在不同主题里采用不同值。
• 模式 是在同一组规则下，按场景选择的一套值，例如浅色与暗色。
• 文字、图标、边框、照片和浮层都要检查，不能只改变页面背景。
• 支持用户或系统的主题选择时，应约定默认方式和切换行为，保持操作清楚。

用模式表达不同场景见 Figma 模式指南 ；颜色用途与组合检查见 Spectrum 颜色指南 。

建立主题的流程

主题映射的示意

这里描述颜色方向，不指定本项目色值。

用一个例子走一遍

用户切换到暗色主题，表单继续使用“主要文字”和“错误提示”这些用途。团队重新选择它们的暗色值，并打开错误、禁用和菜单状态一起检查。如果红字在暗背景上不清楚，就修正错误用途的值，而不是只调亮整个页面。

边界与常见误解

暗色模式不必和品牌变化绑在一起。主题切换也不应改变任务含义、字段名称或操作顺序。设计稿里的模式设置不会自动生成网页的切换逻辑，浏览器实现仍需单独验证。