已有浅色调色板时适配深色模式：用表面层级…

当你已有浅色配色，需要将其翻译成舒适、可访问且精致的深色模式时使用。

适用场景

解决思路

1. 设计深色模式体验时要超越简单颜色反转。
2. 降低整体亮度，以减少眼睛疲劳。
3. 用更浅的色阶表达表面层级/高度，而不是使用阴影。
4. 对深色背景上的明亮颜色进行去饱和处理。
5. 保持足够的对比度，确保可读性。
6. 背景使用最深的深色，例如 #121212。
7. Surface 1 比背景略浅，用于抬升的卡片。
8. Surface 2 再浅一些，用于模态框、下拉菜单。
9. Surface 3 是最浅的深色，用于工具提示、菜单。
10. 主色降低饱和度 10-20%。
11. 错误/警告色针对深色背景调整对比度。
12. 文本使用灰白色（#E0E0E0），不要使用纯白（#FFFFFF）。
13. 边框使用细微、低不透明度的白色。
14. 考虑略微调暗图片。
15. 提供深色变体插图。
16. 标志可能需要深色背景上的浅色版本。
17. 避免图像中出现大面积明亮区域。
18. 正文文本最小对比度为 4.5:1。
19. 使用屏幕阅读器测试，确认模式切换能被正确播报。
20. 尊重 prefers-color-scheme 媒体查询，自动适配系统深色偏好。
21. 在自动检测之外提供手动切换开关。
22. 不要只是反转——要有意识地重新设计表面。
23. 在实际深色环境中测试。
24. 检查深色模式下的每个组件。
25. 在模式之间提供平滑过渡。
26. 使用语义化 token，以便轻松切换。

适用边界 · 注意事项

• 尚未有浅色调色板、需要先构建基础调色板时，应改用 `color-system`。
• 只想做机械颜色反转、不打算重新设计表面时，不适用。