开篇小故事：产品要上线深色模式，你打开作图软件，选中所有图层，找到颜色替换工具，把界面中的白色换成黑色，把黑色换成白色，把灰色系全部倒转。前后花了不到二十分钟。

看着屏幕上的结果，你说不出哪里不对，但就是不对。背景变黑了，文字变白了，按钮的蓝色还在，但整个界面像是一个廉价的"暗色皮肤"，而不是 iOS 或 macOS 那种深色模式该有的感觉。你以为是哪个颜色值没调对，于是逐一检查，花了两个小时，还有没有找到问题。

浅色模式的层级逻辑

理解反转用色为什么不行，就要从浅色模式的层级逻辑说起。

浅色模式用阴影建立层级。背景是白色或浅灰，卡片浮在背景上方，靠轻微的阴影和背景拉开距离；弹窗浮在卡片上方，阴影更深、扩散范围更大。文字用深灰或黑色，在浅色背景上形成高对比。品牌色点缀在按钮、链接、高亮区域。整套系统设计的核心规则就是：层级越高，颜色越深。深色的影子投在浅色背景上，对比清晰，层次分明。

把这套系统配色反转，表面上逻辑自洽，但有四个具体的问题，如果处理不好，每一个都会把界面设计方向搞偏。

问题一：背景色不能是纯黑

反转操作通常第一步就是把白色背景换成 #000000。但纯黑背景会带来两个麻烦。

第一个是光晕效应。浅色文字或图形放在纯黑背景上，人眼会感知到一种扩散感——浅色内容的边缘像在向外渗透、发光。这是视觉系统处理高对比边缘的正常反应，对于用户而言，这种 UI 用起来非常不舒服，长时间阅读时眼睛会持续疲劳。

左图纯黑 （#000000） 高对比度 + 暗环境，眼睛持续疲劳，右图深灰 #121212）明度 6%–12%，为层级保留上升空间

第二个是层级空间被压死。深色模式需要靠明度差区分层级：背景最暗，卡片比背景稍亮，弹窗比卡片再亮一点。背景已经是绝对黑（明度 0），上面每一层就只能往亮处走。但纯黑到浅灰之间的跨度太大，每层需要跳跃很多才能和背景拉开，结果是层级差距要么太小看不出来，要么太大感觉断裂。

成熟的深色模式设计系统都不会用纯黑背景。Material Design 的背景色是 #121212，明度约 7%，带一点深灰的感觉。iOS 深色模式背景虽然是 #000000，但那是针对 OLED 屏幕省电的特殊考量，Apple 在文字和图层上做了大量透明度处理来补偿纯黑带来的问题。通用方案是明度在 6%–12% 之间的深灰。

背景色还有一个细节需要好好处理，那就是在灰色里加入微量主色色相。纯灰（饱和度为 0）的背景和有色相的界面元素放在一起，整体会有轻微的割裂感。把背景灰的饱和度调到 3%–6%、色相和主色一致，整体协调很多。这和做中性色时要带主色色相是同一个道理，而这在深色模式里效果更加明显。

问题二：层级靠提亮，不靠阴影

在浅色模式里，卡片和弹窗的层级靠阴影来区分，它们浮在白色背景上，阴影越深层级越高。把这套界面转成深色模式，阴影还在，但确与背景融合，看不见了。

阴影的原理是深色影子投在浅色背景上产生对比。深色背景上，深色阴影几乎没有对比，直接消失。有设计师会改用亮色阴影来替代，但亮色阴影在视觉上说不通，因为现实世界不存在往上发亮的影子，人眼会本能地觉得奇怪。

深色模式用另一套方式建立层级，那就是靠表面颜色的明度差。背景层最暗，卡片层比背景稍亮，浮层比卡片再亮一点，弹窗在最上层，最亮。也就是深色模式建立层级，不是靠影子往下压，而是靠亮度往上托。

Material Design 把这套逻辑系统化成了 Elevation 模型。

深色模式里，每上一个层级，就在该层的表面颜色上叠加一层半透明白色：

我们在实际操作时可以不用记这些具体数值，只需记住两条原则即可：

1. 每升一层，表面颜色提亮 1%–3%，肉眼刚好能感知，但不会跳得太突兀；