EAimTY 的博客
肥宅。
首页
关于
主题
网页自适应系统暗色模式的W3C新规范:prefers-color-scheme
Aug 02, 2020

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

prefers-color-scheme是什么

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

prefers-color-scheme怎么用

可以参考 MDN 关于prefers-color-scheme 描述

prefers-color-scheme有 2 种值:

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

还有一个已废弃的值:

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

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

CSS

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

JavaScript

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

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

另外还可以监听系统暗色模式的状态,在系统开关暗色模式时作出反应:

window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
  if (e.matches) {
    // 系统开启暗色模式后做什么
  } else {
    // 系统关闭暗色模式后做什么
  }
});

兼容性

其实prefers-color-scheme也不是什么新东西了,去年水果就已经在 macOS Mojave 上的 Safari 中添加了它,随后各浏览器不断跟进,现在的兼容性还算不错:

扯点不相关的

“为什么没有夜间模式?你的夜晚太珍贵,我们不忍心占用,更不愿意成为你半夜醒来看手机的原因。愿你每夜好眠。”
——微信团队张某

“为了优化用户体验,微信与苹果达成了合作,共同探索微信在 iOS 系统的暗黑模式体验,目前该功能已完成开发,将有望在下一个新版本中上线,敬请期待。”
——微信团队张某

只有水果配教你做产品?

respond-post-42
Hans Wan
Aug 18, 2020, 08:26

写的很好,最后张某龙那个有被笑到😂😂。

Sep 24, 2020, 16:03

我不喜欢暗色,特别是不经我同意,直接切换的。

Sep 28, 2020, 10:27

这不是“自动”切换,系统的暗色模式状态是由用户自己控制的。

添加新评论

请填写称呼
请填写合法的电子邮箱地址
请填写合法的网站地址
请填写内容