暗色模式的正确做法（色导网指南）
反色之所以一定失败，是因为浅色界面的层级靠「越上层越白」，而深色界面必须靠「越上层越浅灰」——方向反过来，但不是数值反过来。
为什么反色不行
浅色界面里，页面底色是最暗的、卡片比它白、弹层最白。如果把每个值反过来，底色变成最亮的，卡片比底色更暗——层级整个倒了，看起来像是所有元素都凹了进去。
第二个问题是彩色。浅色模式里为了压白底而选的深色品牌色，反色后变成一个很亮的浅色，饱和度却还在原处，于是在深底上发荧光、刺眼。
四步建法
- 定底色：不要用纯黑。留一点余量，这样才有比底色更暗的空间可用（比如内嵌的输入框凹槽）。本站方案用 #14161A。
- 排表面序列：底色之上做三级递浅的表面——区块、卡片、弹层。相邻两级的差要够看出来，但不能大到像两种主题。
- 重取彩色：每个彩色沿明度轴提亮，同时降一点饱和。提亮而不降饱和会得到荧光感。
- 换层级手段：阴影在深底上几乎看不见。改用 1px 描边加表面序列表达高度，必要时给弹层加一点外发光而不是投影。
一个完整的取值表
| 角色 | 色值 | 压底色对比度 | 说明 |
|---|---|---|---|
| 页面底 | #14161A | — | 最底层。 |
| 表面 1 | #1D2026 | 1.11:1 | 卡片与区块，差异小但能看出。 |
| 表面 2 | #272B33 | 1.28:1 | 弹层与输入框。 |
| 正文 | #E8E8EA | 14.80:1 | 不用纯白，减少光晕。 |
| 次级文字 | #9EA0A8 | 6.94:1 | 压表面 1 仍过正文 AA。 |
| 链接 | #7FA8D9 | 7.34:1 | 浅色模式的深靛提亮后的版本。 |
| 危险 | #E3766C | 6.10:1 | 深底上的红必须提亮并降饱和。 |