暗色模式色板方案 · 色导网方案库
把浅色模式的颜色反过来会得到一个发灰、发脏、层级全乱的界面。深色是另一套取值，不是同一套的倒影。
色卡
#14161A
#1D2026
#272B33
#3A4049
#E8E8EA
#9EA0A8
#7FA8D9
#E59276
#5FB79F
#E3766C
层级的方向反了过来
浅色界面里，越靠上的层越白；深色界面里，越靠上的层越浅灰。所以深色不能靠「把白色区块变黑」实现，而要重建一条从底色往上递浅的表面序列。阴影在深色里几乎看不见，层次只能靠这条序列和描边表达。
底色也不要用纯黑：一旦底是 #000000，就没有比它更暗的层可用，而且纯黑配浅色文字的光晕最明显。
实测对比度
| 文字／底色 | 用途 | 对比度 | 判定 |
|---|---|---|---|
| 正文／底 bg | 正文 | 14.80:1 | 正文 AAA |
| 正文／表面 1 | 卡片里的正文 | 13.34:1 | 正文 AAA |
| 次级／表面 1 | 次级文字 | 6.25:1 | 正文 AA |
| 品牌浅蓝／表面 1 | 链接 | 6.61:1 | 正文 AA |
| 强调橙／表面 1 | 强调文字 | 6.76:1 | 正文 AA |
| 危险红／表面 1 | 错误提示 | 5.50:1 | 正文 AA |
| 成功绿／表面 1 | 成功提示 | 6.81:1 | 正文 AA |
彩色在深底上要重新选
同一个品牌色在深底上往往直接不可读：深靛 #1F3A5F 压在 #1D2026 上几乎没有对比。解决办法是把品牌色沿明度轴提亮，同时降一点饱和——提亮而不降饱和会得到一个发荧光的颜色，在深底上刺眼。
语义色同理。红色尤其明显：浅色模式里那个沉稳的 #B4342A 在深底上看起来是一团暗斑，必须提亮到 #E3766C 这一档才读得出来。
CSS 自定义属性
:root {
--dk-bg: #14161A;
--dk-surface1: #1D2026;
--dk-surface2: #272B33;
--dk-border: #3A4049;
--dk-text: #E8E8EA;
--dk-sub: #9EA0A8;
--dk-brand: #7FA8D9;
--dk-accent: #E59276;
--dk-ok: #5FB79F;
--dk-bad: #E3766C;
}