暗色模式设计指南：不只是把颜色反转那么简单

暗色模式的设计原则

Google Material Design 将暗色主题的核心原则总结为：用深色表面表达高度。越高层级的组件（如对话框、菜单），表面颜色越浅，以此传达层次感。

颜色系统的设计

不要直接使用纯黑（#000000）作为背景，这会产生过强的对比度，导致视觉疲劳。推荐使用深灰色系：

• 背景层：#121212
• 卡片层：#1E1E1E
• 悬浮层：#2C2C2C

文字对比度

WCAG AA 标准要求正文文字的对比度至少为 4.5:1。在暗色背景上，不要使用纯白文字，而是使用带透明度的白色：主要文字 rgba(255,255,255,0.87)，次要文字 rgba(255,255,255,0.60)。

图片和媒体的处理

在暗色模式下，高亮度图片会显得格格不入。可以为图片添加轻微的暗色遮罩，或在 CSS 中使用 mix-blend-mode: multiply 来降低图片亮度。