网页自适应跟随系统深色模式

近几年，各个主流操作系统都逐渐开端注重深色方式，从而改善用户在环境光亮低时的阅读体验。随着水果在 iOS 13 与 macOS Mojave 中添加了深色方式，除了 Linux 以外一切的主流操作系统都曾经完成了系统层级的深色方式。Linux 由于 DE、WM 的种类繁杂暂时没有统一的标准，但目前可以经过深色 GTK+ 主题、阅读器插件等方式完成“伪全局”深色方式。既然有了系统层级的适配，阅读器就可以读取深色方式开关，从而完成网页的自顺应。这就是新标准 prefers-color-scheme。

首先，大家知道什么是prefers-color-scheme吗？

什么是prefers-color-scheme？

去年7月末，W3C发布的 Media Queries Level 5 标准草案 中提到了新的属性 prefers-color-scheme，大致的内容就是网页可以通过这个CSS的条件，来获取用户设备当前的颜色模式。

通俗的讲，我们在前台切换设备的颜色模式，网页也可以跟着自动切换。

这个东西怎么用？

prefers-color-scheme提供了两个值；分别是 light 以及 night；

顾名思义，light就是白天模式的样式代码，则night是深色模式的样式代码；

详细介绍：

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

还有一个已废弃的值：

• no-preference——浏览器宿系统使用未知主题的界面，当较旧版本的浏览器在宿系统不支持系统层级的深色模式时会返回这个值，较旧版本的浏览器 privacy.resistFingerprinting 被设置为 true 时返回的也将是这个值

CSS样式代码：

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

通过条件规则组就可以作出判断。

我们可以将这串代码放在网站的自定义style里面，如图：

或者，也可以这么写：

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

当然了，目前测试在MacOS系统完美适配，Win系统暂时没有进行测试

源代码下载

Dark-light

下载

像我自己的博客，其中已经包含了Javascript，来实现用户跟随深色模式的代码，大家可以参考一下：

if (window.matchMedia('prefers-color-scheme: dark').matches) {
// 深色模式的条件代码
} else {
// 非深色模式的条件代码
}

另外还可以监听系统深色模式的状态，在系统开关深色模式时作出反应：

window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
if (e.matches) {
// 深色模式的条件代码
  } else {
// 非深色模式的条件代码
  }
});

浏览器的兼容性

看得懂吗？看不懂别急，夏柔给你重新写了一个表，你来看看：

以下是夏柔测试的浏览器，和官方的浏览器兼容性对比：

如何应用到WordPress的主题上？

最简单的方法，就是下面的样式代码添加至当前主题footer.php 文件里

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

再或者更简单的方法，把亮色的代码去掉就可以了；

<style>
@media (prefers-color-scheme: dark) { 
// 深色模式样式 
}
</style>

大家有能力的话可以自己写；

最后，转载请注明来源，谢谢！