深色模式

Dark Mode不是夜间模式

Material Design 中推荐的深色模式默认最低层颜色为 #121212，而在这之上的层级则使用不同透明度的白色透明层遮罩获得层级区分。深色主题的最底层颜色应该达到 15.8:1 的对比度级别，因为这可以确保即使当应用于最高层的表面时，正文文本仍能通过 WCAG 的 AA 标准至少能达到 4.5:1 对比度。

在浅色模式下我们使用的一般都是高饱和的颜色，然而在深色的背景承载下，这些较为浓重的颜色无法满足 4.5:1 的最低对比度标准。高饱和的颜色在深色的背景下也容易产生视觉抖动，从而导致人眼疲劳。所以在深色模式下我们应当选择更低饱和的颜色以达到更好的可读性。

在某些情况下，色彩需要特殊对待。

1. 品牌色

为了保证品牌 VI 的一致性，品牌色可保持原饱和度不变，但对应用范围应当极其克制，仅限于在个别元素，如品牌 Logo 或品牌性的按钮上，但界面中的其余部分仍应遵循低饱和的配色规则。

2. 氛围背景色

如果我们一直采用无色倾的深灰色作为背景，用户很容易就会感到乏味。我们可以尝试把品牌色融入到背景中去营造氛围感，把品牌色用极低的透明度与系统默认的深色模式背景色叠加，得到的结果就可以用来作为氛围色运用到设计中。但切记，这个氛围背景色需要足够暗，才可以保证在最高的层级中依然可以保证满足 4.5:1 的最低对比度。

3. 浅色模式下使用大面积色彩的元素

深色模式的界面整体以深色为主，在浅色模式下使用大面积色彩的元素，如导航栏、工具栏等在深色模式下应避免使用彩色，因为在深色模式下这些色彩可能会显得刺眼，对比过于强烈，破坏深色模式的沉浸感。

4. 深色模式下的提示元素

在浅色模式下我们有时会使用深色的元素，比如 Toast 提示等。在深色模式下为了让这样的模块依然足够突出，我们可以少量的使用浅色底作为模块的背景，但仅限于这类面积很小，且需要特别强调的模块中。

文字

不要在深色模式下使用纯白色的文字作为正文，因为深色模式下纯白色的对比会非常强烈，很容易造成视觉疲劳。当然为了保证合适的对比度，文字颜色也不宜过浅。推荐的做法是在文字层级上使用透明度，这样可以使文字与在不同的氛围背景色上更和谐，或者使用 HSB 模式下调整 B 值的方法确定文字的固定色值。

图形

在浅色模式下使用的一些线性图标，如果直接反转拿到深色界面下来用，你可能会发现图形的形状感和体积感都损失了很多，这是因为白色背景可以更好的表现出形状，人的大脑可以将白色脑补成图形的一部分。然而在深色模式下，这种作用消失了，人脑更倾向于认为这些空白的部分是镂空的。所以在深色模式下建议把线性图标反转为面性图标，不过具体的情况可以综合产品实际的设计风格和深色模式下的具体视觉效果再做判断。