让手机页面自适应深色模式适配

近几年，各个主流操作系统都逐渐开端注重深色方式，从而改善用户在环境光亮低时的阅读体验。很多手机APP应用都已经对深色模式进行了支持，常用的手机应用也在 App Store 的政策压力下对深色模式进行了适配。那么，对于手机网站来说，是否也能支持自适应浅色模式和深色模式，本文将介绍一下手机网页如何开发自适应深色模式适配。

既然有了系统层级的适配，手机网站的页面就可以读取深色方式开关，从而完成网页的自顺应。CSS推出的 prefers-color-scheme 的 media 选择器，使得网页能够适配深色模式和浅色模式。

什么是prefers-color-scheme？

2020年7月31日，W3C发布的 Media Queries Level 5 标准草案 中提到了新的属性 prefers-color-scheme，网页现在可以通过条件规则组来获取浏览器宿系统的暗色模式状态并应用了。也就是说，现在我们可以很简单地实现“暗色模式系统访问的页面是暗色的，亮色模式系统访问的页面是亮色的”。

prefers-color-scheme提供了两个值；分别是 light 以及 night；顾名思义，light就是白天模式的样式代码，则night是深色模式的样式代码。

light——浏览器系统使用亮色主题的界面，同时也是默认值，浏览器 privacy.resistFingerprinting 被设置为 true 时返回的也将是这个值。

dark——浏览器系统使用暗色主题的界面。

CSS语法

@media (prefers-color-scheme: <mode>) {
}

其中 mode 有如下可能的取值：

light：浅色模式
dark：深色模式

CSS样式代码

@media (prefers-color-scheme: light) {
// 亮色模式样式
}
@media (prefers-color-scheme: dark) {
// 深色模式样式
}

CSS变量

除了prefers-color-scheme，我们还要了解CSS变量的功能和用法。

CSS 变量（CSS variable）又叫做“CSS 自定义属性”（CSS custom properties）。

变量的声明使用变量名前面要加两根连词线–，变量名大小写敏感。var()函数用于读取变量。var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

改造现有的网页

有了这个功能，我们就可以着力改造现有的网页。我们在CSS里将主题颜色使用CSS变量来表示，我们需要定义两组变量，一套深色，一套浅色，使用如下的代码进行处理。

:root {
–bg: #FFFFFF;
–textColor: #000000;
–borderColor: #2C2C3A;
}
@media (prefers-color-scheme: dark) {
:root {
–bg: #000000;
–textColor: #FFFFFF;
–borderColor: #2C2C3A;
}
}

这样，当有人使用手机的深色模式系统主题时候，访问网站的时候，将会自动切换到深色模式。

只使用 CSS 条件规则很难实现某些需求，我们可以对 window 使用 matchMedia 方法得到的 Media 使用 matches 方法来获取系统暗色模式状态：

if (window.matchMedia(‘prefers-color-scheme: dark’).matches) {
// 是暗色模式做什么
} else {
// 非暗色模式做什么
}

通过上面的改造，就可以实现手机端深色和浅色模式的自适应切换。

不同操作系统深色模式设置

Windows-设置-个性化-颜色-选择颜色-深色

iPhone-设置-显示与亮度-外观-深色

Android-设置-显示和亮度-显示模式-深色模式