当苹果在 iOS 13 中引入系统级深色模式时，整个设计行业仿佛一夜间找到了新大陆。一时间，几乎所有应用都急匆匆地为自己的界面披上了一层黑色外衣。但当我们冷静下来审视这些"深色模式"时，会发现大多数只是简单地将白色背景换成了黑色，将黑色文字换成了白色——这种粗暴的颜色反转，恰恰是深色模式设计中最常见的误区。
为什么你的深色模式看起来不对
你是否有过这样的体验：打开某个应用的深色模式后，总觉得哪里不对劲，眼睛反而比浅色模式更容易疲劳？这不是你的错觉。人眼在低光环境下的视觉感知机制与明亮环境中截然不同，而大多数"反转式"深色模式完全没有考虑到这一点。
在深色背景上，纯白色（#FFFFFF）的文字会产生明显的"光晕效应"（halation），文字边缘会显得模糊、发散，长时间阅读会造成视觉疲劳。这就好比在黑暗的房间里突然打开一盏强光灯——刺激感远大于舒适感。
一个好的深色模式，应当让用户感到文字仿佛是"浮"在背景之上的，而不是"刺"入眼睛的。这需要我们从对比度、层次感和色彩饱和度三个维度进行系统性的重新设计。
对比度的微妙平衡
WCAG（Web Content Accessibility Guidelines）建议正文文本与背景之间的对比度至少达到 4.5:1。但在深色模式下，这个标准需要被更谨慎地解读。过高的对比度和过低的对比度同样有害。
深色模式设计的黄金法则：不要用纯黑背景配纯白文字。使用深灰色背景（如
#121212）搭配浅灰色文字（如#E0E0E0），这样既保证了可读性，又减少了视觉疲劳。
Google 的 Material Design 团队在这方面做了大量研究，他们推荐的深色模式配色方案遵循以下原则：
- 主表面色使用
#121212，而非纯黑#000000 - 主要文字使用 87% 不透明度的白色，即
rgba(255,255,255,0.87) - 次要文字使用 60% 不透明度的白色
- 禁用文字使用 38% 不透明度的白色
- 通过不同层级的表面高度（elevation）来区分信息层次
层次与表面
在浅色模式中，我们习惯用阴影（shadow）来表达元素的层次关系——越"高"的元素投下越重的阴影。但在深色界面上，阴影几乎不可见。这是一个被很多设计师忽略的关键问题。
深色模式中表达层次的替代方案是提高表面亮度。想象一下，一个卡片从桌面上浮起来，在灯光照射下，它的表面会变得更亮。Material Design 将这种效果量化为不同的"海拔"（elevation）等级：
- 海拔 0dp — 基准色
#121212 - 海拔 1dp — 基准色 + 5% 白色叠加
- 海拔 2dp — 基准色 + 7% 白色叠加
- 海拔 4dp — 基准色 + 9% 白色叠加
- 海拔 8dp — 基准色 + 12% 白色叠加
这样一来，虽然整体界面是深色的，但用户依然能够通过微妙的亮度差异感知到元素之间的前后关系。
色彩饱和度
深色模式中另一个常被忽视的问题是色彩饱和度。在浅色背景上表现良好的高饱和度色彩，放到深色背景上往往会显得过于刺眼，甚至产生"荧光"般的不适感。
解决方案是为深色模式专门调整色彩方案，适当降低饱和度并提高明度。Material Design 推荐将主色调的饱和度降低约 20%，同时将明度从标准的 500 色阶调整到 200 色阶。
/* 浅色模式的主色调 */
--color-primary: #D4542A; /* 原始橙红，饱和度较高 */
/* 深色模式的主色调调整 */
--color-primary-dark: #E8967A; /* 降低饱和度，提高明度 */
/* 通过 CSS 自动切换 */
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #121212;
--bg-surface: #1E1E1E;
--text-primary: rgba(255,255,255,0.87);
--text-secondary: rgba(255,255,255,0.60);
--color-accent: #E8967A;
}
}如上面的代码示例所示，实现一个优雅的深色模式并不是简单地"把颜色取反"，而是需要建立一套完整的色彩映射规则。每一个颜色值都需要根据深色模式的特性重新校准。
结语
深色模式不是一项"锦上添花"的功能，而是对用户体验的切实关怀。在低光环境下阅读时，一个精心设计的深色模式能够显著减少眼睛疲劳，甚至节省 OLED 屏幕设备的电量。但前提是——它是被"设计"出来的，而不是被"反转"出来的。
下次当你为项目添加深色模式时，请记住：这不是一次简单的换肤操作，而是一次全新的设计挑战。你的用户值得拥有更好的暗色体验。