暗色主题（Dark Mode）在过去几年里从一个小众偏好变成了设计标配。但很多人做出来的"暗色"界面只是把背景涂成了黑色，结果要么对比度失调、要么层次混乱，反而比浅色版本更难用。
这里整理了七条在实际项目中反复验证过的原则，供参考。
原则 01
不要用纯黑做背景
纯 #000000 在亮色显示器上会产生强烈的光晕效应（halation），让白色文字变得刺眼。推荐使用 #0d0d0d—#1a1a1a 这个范围内的"软黑"。
原则 02
用深度而不是颜色来区分层级
在暗色系统中，"层级越高 → 背景越亮"。背景用 #0d0d0d，卡片用 #1a1a1a，弹窗用 #242424，依次递进，不需要换颜色。
原则 03
降低文字对比度，而不是提高
白色文字放在深色背景上，对比度往往已经超过 WCAG 的 7:1 要求。次要文字用 #888—#aaa，比全部堆 #ffffff 更舒适、层次更清晰。
原则 04
强调色饱和度要适当降低
同一个强调色在暗色背景下会显得比浅色背景更鲜艳。如果你的品牌色是 #FF6B00，暗色模式下可以偏向 #f5a623 这样稍微中性一点的色调，避免"刺眼"。
原则 05
边框用透明度，不用颜色
用 rgba(255,255,255,0.08)—0.12 做分割线和边框，比硬编码一个灰色值更能适应不同背景深度，看起来也更精致。
原则 06
阴影要用有色阴影
在深色界面上，传统的黑色阴影几乎不可见。改用带微弱色彩（如强调色 10% 透明度）的阴影，或者用 border + box-shadow: inset 做"内发光"效果来替代。
原则 07
图标和插图需要单独适配
直接将浅色模式的彩色图标放进暗色背景，往往会出现不协调的白色背景或过亮的色块。SVG 图标推荐用 currentColor 继承文字颜色，位图则需要准备暗色版本或加遮罩处理。
这七条原则背后有一个共同的逻辑：暗色设计的核心是"减法"——减少刺激、减少冗余，用最低的视觉噪声传递最清晰的信息层级。把这个原则内化之后，很多细节决策会变得自然而然。
好的暗色界面，是让人忘记它是暗色的那种。