设计一个好的“深色模式”需要注意什么？
深色模式（Dark Mode）已经从一个“极客”功能，演变成了现代应用程序和网站的标配。它不仅在弱光环境下能有效减轻用户的视觉疲劳，在OLED屏幕上还能起到节省电量的作用。然而，一个优秀的深色模式并非简单的颜色反转，它是一套需要深思熟虑的设计体系。
1. 告别纯黑，拥抱深灰
很多设计师的直觉是将背景直接换成纯黑色（#000000）。但这并非最佳选择。纯黑的背景与纯白的文字会形成极高的对比度，长时间阅读反而会产生“光晕”效应（Halation），加剧眼部疲劳。
Google的Material Design规范推荐使用深灰色（如 #121212）作为深色模式的主背景色。这样做的好处是：降低了刺眼的对比度，使阅读更柔和；并为“海拔”和“深度”的设计留出了空间。
2. 重新思考色彩体系
在浅色模式下鲜艳亮丽的品牌色，直接放在深色背景上可能会过于刺眼和饱和。因此，我们需要为深色模式重新校准色彩。
通常的法则是，选择饱和度较低、亮度稍高的颜色版本。例如，在我们的网站中，浅色模式的链接蓝色是 #0066cc，而在深色模式下，我们选择了更亮的 #2997ff，以确保在深色背景下既醒目又和谐。
3. 用“海拔”来营造层次感
在浅色模式中，我们习惯用阴影来区分元素的层级（比如卡片、弹窗比背景“更高”）。但在深色背景下，黑色阴影的效果会大打折扣。
深色模式的层次感是通过亮度来体现的。一个元素的海拔越高，它接收到的“光”就越多，因此它的背景色应该更亮一些。例如，主背景是 #121212，那么第一层卡片的背景可以是 #1E1E1E，更高层的弹窗则可以是 #2C2C2C。这种微妙的亮度差异，创造了清晰而自然的视觉深度。
4. 文本对比度与易读性
可访问性（Accessibility）是设计的底线。根据WCAG标准，正文文本与其背景的对比度应至少为4.5:1。在深色模式下，我们不能只依赖一种白色文字。
一个常见的做法是，根据文字的重要性使用不同的透明度：
- 高强调文本（标题）：使用87% - 100% 不透明度的白色。
- 中强调文本（正文）：使用60% - 87% 不透明度的白色。
- 低强调文本（辅助信息）：使用38% - 60% 不透明度的白色。
这样做不仅保证了可读性，也自然地形成了视觉上的信息层级。
5. 把选择权交给用户
最好的深色模式，是用户可以自由选择的模式。我们网站最终实现的“浅色-深色-跟随系统”三段式切换功能，正是当前业界公认的最佳实践。它充分尊重了用户的个人偏好和操作系统的当前设置，提供了最大程度的灵活性。