2026 年做暗色模式，别只把背景调黑就完事

去年我们 App 上暗色模式，设计师第一版就是背景 #000000、字 #FFFFFF，看着像黑白打印机打出来的。测试一截图，刺眼，长文根本读不下去。后来才搞清楚，暗色模式的水比想象深。

第一，别用纯黑。纯黑背景配纯白字，对比太硬，眼睛累。我们用的是接近黑的深灰 #121212 当底，正文用 #E0E0E0 而不是纯白，舒服很多。这是 Material Design 暗色规范里就提过的，但不是所有人都照做。我们灰度测试时，深灰底的阅读完成率比纯黑高 18%。

第二，层级靠亮度和阴影。亮色界面里我们用阴影分区，但暗色下阴影看不出来，得反过来——越靠前的卡片颜色越亮。我们把背景、卡片、浮层做了三档灰阶，一眼就能分出谁在上头。弹窗用最亮那档，立刻和背景拉开距离。

第三，图片和图标要单独处理。亮色下好看的彩色图，放到暗色背景上经常发灰发飘。我们给图片加了轻微的圆角和内描边，让它"嵌"进界面而不是浮着。图标从彩色换成描边线性风格后，在暗色下清楚多了。2026 年新的做法是用 CSS 的 light-dark() 和 color-scheme，一套代码两边适配，不用维护两套变量。省事，也少出错。

最后提一个容易翻车的点：暗色模式下的品牌色。很多牌子主色是大红大绿，放到暗底上亮得扎眼。我们的做法是暗色下把品牌色降饱和度、提亮度一档，既不丢识别度又不刺眼。上线前一定在真机上滑一遍，模拟器看不出那种"亮得不舒服"的感觉。细节决定用户愿不愿意开这个模式。

标签： 暗色模式 UI设计 设计趋势