实现页面适配_HTML 5 深色模式适配 (prefers-color-scheme)

原文于2020年5月31日首发在我的博客，你可以点击这里进行查看。以下为正文。

越来越多的系统 (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 的简单适配方法。如果你想深入了解，也推荐你看一下以下这几篇文章。

• prefers-color-scheme – CSS: Cascading Style Sheets | MDN
• 为你的网页添加深色模式 – 疯狂的技术宅 – SegmentFault 思否
• prefers-color-scheme: Hello darkness, my old friend