CSS 轻松实现“日间模式”和“夜间模式”

夜间模式

作为熬夜专业户，常常会在深夜刷手机。当长时间使用没有【夜间模式】的 APP时，总会感觉到眼睛酸痛。微信就是没有【夜间模式】的代表之一。按照微信的说法：你的夜晚太珍贵，我们不忍心占用，更不愿意成为你半夜醒来看手机的原因。愿你每夜好眠。

对于资深打工人而言，深夜确实太珍贵了！我只有深夜才能放松刷会手机😭。长时间使用亮色系的 APP 是不能接受的。经过一番查阅，iOS 中只需将手机设置为深色模式就可以实现微信的【夜间模式】。

✿✿ヽ(°▽°)ノ✿

那问题来了，作为一名前端，我们是否也可以为用户提供自适应的夜间模式？

color-scheme

color-scheme CSS 属性允许元素指示它可以舒适地呈现哪些颜色方案。 操作系统颜色方案的常见选择为“亮色”和“暗色”，或“日间模式”和“夜间模式”。当用户选择其中一种颜色方案时，操作系统会对用户界面进行调整，包括表单控件、滚动条和 CSS 系统颜色的使用值。

属性介绍

属性	含义
normal	表示元素未指定任何配色方案，因此应使用浏览器的默认配色方案呈现
light	表示可以使用操作系统亮色配色方案渲染元素
dark	表示可以使用操作系统深色配色方案渲染元素
dark	禁止用户代理覆盖元素的颜色方案。

当没有特殊设置时，color-scheme 会响应系统当前的颜色模式。接下来我们就看看几种实现【夜间模式】的方案吧！

方式1：通过浏览器的适配色方案实现【亮色】与【暗色】切换

通过通过系统颜色 Canvas 与 CanvasText 来自适应响应深夜模式

:root {
  color: CanvasText;
  background-color: Canvas;
}

默认情况下，CanvasText 会生成接近 black 的颜色，而 Canvas 是接近 white 的颜色。实际实现取决于浏览器。

这种方案适合于简单的色系替换，当场景复杂且有色值要求时，该方案不大适合。

方式2：通过媒体查询实现主题切换

@media (prefers-color-scheme: dark) 与 @media (prefers-color-scheme: light) 来实现两种模式切换。 通过查询的当前采用的模式，来设置不同的颜色。

body {
  background-color: #fff;
  color: #000
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
}

该方案灵活性高，但代码量偏大。这里我们可以配合 css 变量来优化一下：

:root {
    --text-color: #000;
    --bg-color: #fff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #fff;
        --bg-color: #000;
    }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color)
}

通过 css 变量与媒体查询，实现在不同模式下响应不同的主题。

方式3：使用 light-dark 实现主题切换

light-dark() 是接受两个参数的函数，且这两个参数都必须为 <color>。系统会根据使用的配色方案选择其中一种。

• 如果所用配色方案为 light 或未知，则返回第一个值的计算值。
• 如果使用的配色方案为 dark，则返回第二种颜色的计算值。

light-dark 的实现方式可以将方案 2 的方式得到简化

body {
  background-color: light-dark(#fff， #000);
  color: light-dark(#fff， #000);
}

需要注意的是，light-dark()目前属于比较新的属性，存在一定的兼容性

总结

实现“日间模式”和“夜间模式”的三种方式

1. 通过系统配色方案试下：Canvas 与 CanvasText
2. 采用 prefers-color-scheme 媒体查询，根据响应实现不同色系。
3. 使用 light-dark 实现两种模式切换。