prefers-color-scheme介绍

暗色模式？很多APP都具备这个功能，Chrome从76版本也开始增加对暗色模式的支持。

准确来说，并不是chrome增加了暗色模式，而是在系统切换为暗色模式时，chrome增加对相应模式的响应；从浏览器外观来说，Chrome Store提供了很多种主题供用户选择。

系统如何开启暗色模式呢？

以Windows为例：

浏览器借助媒介查询语法来检测当前系统的主题，语法：

@media (prefers-color-scheme: dark) {
  ...
}

prefer-color-scheme支持三个值：dark,light,no-preference。

示例：

See the Pen by (@justforuse) on CodePen.

视频教程(youtube)：

这是个非常棒的特性，比起手动切换应用主题色，我们可以根据用户喜好自动切换，成本更低，体验上会更好。

因为是比较新的特性，目前来说，兼容性很差：

Can I Use prefers-color-scheme? Data on support for the prefers-color-scheme feature across the major browsers from caniuse.com.

觉得作者写得不错？不妨轻击下方按钮~

赏点银子给楼主凑凑买咖啡喝吧

扫码打赏，建议金额1-10元