# 深色模式别再用纯黑。

纯黑配白字伤眼睛，也让层次变平。改用深灰，用光线抬起表面，把颜色调柔和。一份实用的深色模式指南。

https://laithjunaidy.com/zh/writing/stop-using-pure-black-in-dark-mode
作者 Laith Aljunaidy. 发布于: 2026-05-29. 最后更新: 2026-09-22.

---

深色模式早就不是小众设置了，而多数深色主题选错了黑。纯黑，也就是 #000000 那种，在色卡上看着有力，放到屏幕上就变得折磨人。如果你的深色主题让人眯眼，通常就是这个原因。

Google 在做 [Material Design](https://m2.material.io/design/color/dark-theme.html) 时学到了这一点，最后推荐的基础表面是深灰 #121212，不是黑。理由不是审美，而是眼睛的工作方式，以及深色环境里层次如何被读出来。下面是实用版本，只讲真正要紧的规则。

## 要点

- 不要从 #000000 出发。从 #121212 附近的深灰开始，把它当作你的画布，这也是 Material Design 推荐的值。
- 纯黑上的白字是屏幕能产生的最大对比。它会造成光晕和眼疲劳，对散光读者最难受。
- 用光线而不是阴影来建立层次。在深色里，更高的表面就是更亮的表面。
- 把品牌色降饱和、提亮，然后重新检查对比度。在白底通过的颜色，在深色底常常不通过。
- 深色模式是它自己的一套设计，有自己的规则，不是一个你顺手翻开的滤镜。

## 为什么纯黑是错的默认值？

因为它把对比推过了有帮助的那个点。纯黑上的白字是屏幕能做出的最大对比，而眼睛要为此付账。光在字母边缘晕开，这个现象叫光晕，它对散光读者打击最重。Material Design 自己的指南也这么说：[深灰表面上的浅色文字对比低于黑色表面](https://m2.material.io/design/color/dark-theme.html)，深灰也能减轻眼疲劳。

这不是一小段时间。一个折磨人的深色主题，面对的是每一个打开它的读者，在长时间阅读中，慢慢厌倦你的产品。舒适本来就是深色模式的全部意义。最大对比悄悄把它扔掉了。

## 背景该用什么颜色？

深灰，不是黑。Material Design 推荐 #121212 作为基础表面，这是个不错的起点。它读起来仍然是深的，仍然有质感，但它不再跟读者对着干。纯黑变成一个少见的点缀，而不是整个房间。

这里有一个要如实说的取舍。在 OLED 屏上，纯黑像素会关闭并省电，这也是有些应用去拿 #000000 的原因。但你的表面上承载着真实内容：明亮的照片、彩色卡片、鲜艳的品牌图形。放在纯黑上，这些全都会窜到刺眼的对比。对任何人们要看超过一瞬的东西来说，那点省电换不来这份负担。

## 没有阴影怎么做出层次？

你靠把表面变亮来抬高它，而不是在下面投一层阴影。在浅色主题里，高度来自阴影。在深色里阴影没有落脚处，所以它消失了。Material 的解法是让表面随着升高而变亮。层级越高，就越往白的方向抬。

底层实现是把一层半透明白色叠加合成在 #121212 基础上，表面越高，叠加层越不透明。你不需要记这套算法。你需要记这条规则。更高就是更亮。仅这一个动作，就给深色界面带回了它在平坦黑色虚空里本会失去的层次。

如果你想要具体数值，Material 公布了它们：

| 高度 | 白色叠加层不透明度 |
| :- | :- |
| 0 dp | 0% |
| 1 dp | 5% |
| 2 dp | 7% |
| 3 dp | 8% |
| 4 dp | 9% |
| 6 dp | 11% |
| 8 dp | 12% |
| 12 dp | 14% |
| 16 dp | 15% |
| 24 dp | 16% |

*来源：[Material Design，深色主题](https://m2.material.io/design/color/dark-theme.html)。*

## 你的品牌色怎么办？

调柔和。在白底上唱得响的高饱和色，放到深色画布上会震动，把眼睛累坏。给它们降饱和、提亮，往平静的方向拉回来。目标是清晰和舒适，不是响亮。

然后重新检查对比度，因为深色模式会打破你以前的假设。一个在白底上达到 [WCAG AA 4.5 比 1 门槛](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html)的文字颜色，在深色背景上可能悄悄不达标。单独测试深色主题。它是另一块表面，算的是另一套数。

## 深色模式是它自己的一套设计

它不是你在最后顺手翻开的滤镜。它是同一个产品的第二次设计，有自己的画布、自己的层次模型、自己的颜色。选一个 #121212 附近的深灰，用光线抬起表面，把颜色调柔和，并重新检查每一个对比数值。这些都不难。而它们合起来，就是人们愿意留下的主题和人们想逃开的主题之间的差别。

界面之所以毫不费力，多半就来自这样的小规则。想看另一条影响同样大的，读下面 [费茨定律](https://laithjunaidy.com/writing/fitts-law-bigger-and-closer)如何决定你的按钮是好按还是别扭。

## 常见问题

### 深色模式该用纯黑吗？

不该。纯黑配白字是最大对比，会造成光晕和眼疲劳，对散光人群尤其明显。用 #121212 附近的深灰作画布，把纯黑留作少见的点缀。

### 深色模式背景该用什么颜色？

用深灰而不是 #000000。#121212 附近是个不错的基础。把抬高的表面稍微调亮来表示层次，因为在深色里你没法靠阴影做深度。

### 深色模式里怎么用品牌色？

降饱和并提亮。在白底上看着合适的高饱和色，在深色画布上会震动，而在白底通过的对比度在深色上可能不通过，所以要重新检查文字的可读性。