HTML 5 深色模式适配 (prefers-color-scheme)

越来越多的系统 (iOS, macOS) 对深色模式进行了支持,各种 app 也在 App Store 的政策压力下对深色模式进行了适配。这一系统级的功能,也可以被我们利用来将网页适配深色模式。

实现

为了实现 HTML5 的深色模式,我们需要利用 prefers-color-scheme 媒体特性。它能够帮助检测设备的深色模式开启情况。不过,这一方法并不能完美解决所有情况,你还需要注意下面这一点。

目前,若结果为 no-preference,无法通过此媒体特性获知宿主系统是否支持设置主题色,或者用户是否主动将其设置为无偏好。出于隐私保护等方面的考虑,用户或用户代理也可能在一些情况下在浏览器内部将其设置为 no-preference

prefers-color-scheme – CSS(层叠样式表) | MDN

兼容情况

Can I Use 中,我们可以了解到 prefers-color-scheme 的兼容性也是十分给力的。

CSS 适配

prefers-color-scheme 的适配方式有两种:CSS 适配和 JavaScript 适配。在这里仅介绍 CSS 适配方式。

我们可以直接使用 @media(prefers-color-scheme: dark) 进行适配操作。

为了更好地理解,我简单写了一个适配 prefers-color-scheme 的页面,你可以在这里进行查看。

这个页面对深色模式做了以下更改。

  • html {background: #111;}
  • body {background-color: #272727; color: #fff;}
  • a {color: #50a8d8}

Demo

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

以上这段 CSS 是一个十分简单的Demo。它会在深色模式下更改页面的 background 和 color。当然,这么简单的修改对于某些网站来说其实已经足够了(例如:你不会百度吗)。

总结

这篇文章仅仅是阐述 prefers-color-scheme CSS 的简单适配方法。如果你想深入了解,也推荐你看一下以下这几篇文章。

加入对话

4条评论

留下评论

电子邮件地址不会被公开。 必填项已用*标注