深色模式刚流行时，很多产品的做法是：把页面背景从白改成黑，文字从黑改成白。上线后用户反馈两极分化——有人觉得酷，有人觉得刺眼、看不清、还容易累。问题出在哪？因为「深色」不是「反色」，而是一套独立的设计语言。
一、纯黑背景是个陷阱
人眼对暗场里的亮度变化更敏感。纯黑（#000000）背景上，稍微亮一点的文字会显得「溢出」，边缘发虚，长时间看容易疲劳。这也是为什么主流系统（macOS 的 Dark Mode、Android 的 Material Dark）几乎都不用纯黑，而是用接近黑的深灰，比如 #121212、#1e1e1e。
更关键的是，纯黑抹掉了「层级感」。浅色模式下，我们用白色卡片 + 浅灰背景来区分「浮起来」和「沉下去」；到了深色模式，如果背景和卡片都是黑的，卡片就「消失」了。正确的做法是让前景（卡片）比背景更亮一档——比如背景 #121212，卡片 #1e1e1e 或 #242424，靠明度差而不是颜色差来分层。
二、阴影在深色里会失效
浅色模式里，我们用投影（box-shadow）表现层级：越靠前的元素影子越重。但深色背景上，黑色阴影看不见。所以在深色模式，层级更多靠「提亮」而不是「加影」——上层元素亮度更高，或者加一层极淡的白色描边（1px 半透明白）来勾边。
想快速给深色卡片加一点立体感，可以试 阴影生成器，不过要记得：深色下的「高光描边」往往比阴影更有效，参数思路得反过来调。
三、对比度必须重新算
这是深色模式最容易踩的合规坑。WCAG 对正文对比度要求至少 4.5:1。浅色模式里黑字白底轻松达标；但深色模式里，如果你把正文设成中灰（#888）配深灰背景，对比度可能掉到 3:1 以下，弱视用户直接看不清，也过不了无障碍审核。
所以深色模式的文字通常不是纯白，而是略带灰的白（比如 #e0e0e0），既保留柔和感，又不丢对比度。改完配色，务必用 颜色对比度 工具实测前景/背景的比值，别凭感觉。很多「看着还行」的深色页面，一测才发现关键文字根本不达标。
四、颜色语义要「提亮」而非「反相」
浅色模式里，我们用「深红」表示错误、「深绿」表示成功。直接反相成亮红亮绿，在黑底上会刺眼且显得廉价。正确做法是提高饱和度的同时降低一点明度，让彩色在暗场里依然「沉得下去」。
品牌色也同理。一个在白底上很好看的主色，放到黑底可能太亮或太暗。设计深色主题时，主色往往需要单独调一版，而不是简单套用浅色版的色值。需要统一看不同格式时，颜色转换器 能把 HEX 和 HSL 互转，方便你在 HSL 空间里微调明度（L 值）而不动色相。
五、图片和阴影的适配
浅色模式里好看的照片、插画，放到深色背景边缘常常「硬切」。常见的处理是给图片加圆角、加一层半透明描边，或者用卡片把它们包起来，让过渡更自然。发光质感的插画在深底上反而更出彩——这也是很多深色 UI 喜欢用霓虹、渐变的原因。
六、别忘了一个开关的两个状态
真正成熟的深色模式，是跟随系统（prefers-color-scheme）或提供手动切换，并且保证两套状态下的信息完全等价：同一个按钮、同一段文字、同一张图，在亮和暗下都清晰可读。很多半成品只做了「背景变黑」，却忘了图标、占位图、第三方组件在暗场里还是浅色边框，结果出现「白框浮在黑底」的割裂感。
七、为什么值得认真做
据统计，相当一部分用户在系统层面长期开启深色模式。敷衍的深色主题不仅体验差，还会让品牌显得不专业。而一套真正打磨过的深色界面，在夜间、低光环境、OLED 屏幕（深色更省电）下优势明显。
小结：深色模式 = 深灰而非纯黑 + 靠明度分层而非阴影 + 重测对比度 + 彩色单独调一版 + 图片圆角描边适配。把它当成「重新设计」，而不是「反色滤镜」，体验才立得住。