"做个深色模式"听起来是个简单的需求——把白色背景换成黑色，文字颜色反一下，是不是就完事了？做过的人都知道，远不止如此。一个体验良好的深色界面，背后有一整套独立的设计决策。
这篇文章整理了我在做 CocoDuck 整套深色风格界面时总结的几个关键细节，希望对你做深色 UI 设计有所启发。
1. 不要用纯黑色作为背景
纯黑色（#000000）背景在 OLED 屏幕上看起来很"高级"，但实际使用时有两个问题：一是文字与背景的对比度过高，长时间阅读容易产生视觉疲劳（俗称"光晕感"）；二是纯黑色没有"呼吸空间"，所有元素都像是悬浮在虚空里。
更好的做法是使用接近黑色但带有一点色温的深色，比如 #0A0A0F（略带蓝紫调）或 #0D0D0D。CocoDuck 整站使用的背景色是 #0A0A0F，比纯黑柔和很多。
2. 用"层级"代替"阴影"
在浅色 UI 中，我们用阴影（box-shadow）来表达元素的"层级"——阴影越大，元素感觉越"浮"在上面。但在深色背景下，阴影几乎不可见（黑色阴影投在深色背景上没有对比度）。
深色设计中表达层级的正确方式是调整表面的亮度——越"靠近用户"的元素，背景色越亮。这是 Material Design 深色模式提出的核心原则之一。
/* 层级越高，背景越亮 */ --bg: #0A0A0F; /* 页面背景，最暗 */ --bg2: #111118; /* 区块背景 */ --card: #13131c; /* 卡片，最亮 */
这套三层结构在 CocoDuck 的页面里随处可见——页面背景最暗，分区背景稍亮，卡片最亮，视觉上自然形成"卡片浮在区块上、区块浮在页面上"的层次感，不需要任何阴影。
3. 对比度：文字不是越白越好
很多人做深色模式的第一反应是把所有文字都设为纯白 #FFFFFF。但实际上，纯白文字在深色背景下的对比度过高（WCAG 标准里这同样算"对比度问题"，只是方向相反），长篇阅读会让眼睛感到刺眼。
更舒适的做法是使用接近白色但略微降低亮度的颜色，比如 #E8E8E8，作为正文文字色。次要文字（说明文字、辅助信息）再进一步降低到 #888890 这样的中灰色，形成清晰的文字层级：
- 主标题/重要内容 ——
#E8E8E8（接近白但不刺眼） - 正文段落 ——
#C8C8D0（略带一点冷色调） - 辅助说明 ——
#888890（中灰） - 禁用/占位状态 ——
#444450（深灰）
4. 强调色在深色背景下会"发光"
这是个有趣的现象：同样一个颜色（比如 #F5C842 这个鸭黄色），放在白色背景上看起来是"暖黄色"，但放在深色背景上会产生一种"发光"的视觉效果，显得更鲜艳、更突出。
CocoDuck 整站只用了一个主强调色（鸭黄 #F5C842）和一个辅助强调色（橙红 #FF6B35），严格控制在标题高光、按钮、图标这些"需要被注意到"的元素上，正文区域几乎不使用彩色。
5. 图片和图标也需要适配
最后一个容易被忽视的点：很多图标和插图本身是为浅色背景设计的（比如带白色描边的图标，在深色背景下边缘会显得"脏"）。深色模式下，线性图标（outline icons）通常比填充图标（filled icons）表现更好，因为线条更容易适配不同背景。
对于截图类内容（比如产品界面截图），如果产品本身只有浅色界面，建议在深色页面里给截图加一个浅色的"画框"背景，避免截图边缘和页面背景"硬切"，看起来很突兀。
小结
深色模式设计的核心思路可以总结为一句话：不是"反转颜色"，而是建立一套独立的、自成体系的视觉层级。背景、表面、文字、强调色，每一层都需要单独考虑在深色环境下的表现，而不是简单套用浅色模式的规则取反。