网页自适应跟随系统深色模式-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

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

近几年,各个主流操作系统都逐渐开端注重深色方式,从而改善用户在环境光亮低时的阅读体验。随着水果在 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里面,如图:image.png

或者,也可以这么写:

@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 {
// 非深色模式的条件代码
  }
});

浏览器的兼容性

2021091915385862.png

看得懂吗?看不懂别急,夏柔给你重新写了一个表,你来看看:

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

兼容不兼容
Chrome(MacOS、夏柔)IE(孤零零)
WebView(MacOS、夏柔)
微信X5内核(华为鸿蒙、夏柔)
Firefox(MacOS、夏柔)
IOS 上的 Safari 浏览器(官方通过、夏柔未测试)
Samsung Internet(官方通过、夏柔未测试)
Opera Android(官方通过、夏柔未测试)
Opera(官方通过、夏柔未测试)
Chrome(华为鸿蒙、夏柔)
Edge(官方通过、夏柔未测试)
Onion(洋葱)(MacOS、华为鸿蒙、夏柔)
更多暂未测试(没时间了,抱歉)

如何应用到WordPress的主题上?

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

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

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

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

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

最后,转载请注明来源,谢谢!



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章