网页自动适配操作系统/浏览器夜间模式

最近在浏览一些博主的网站，发现一个很好玩的效果，当手机浏览器切换到暗色模式后，网页也跟着切换暗色效果，切换白天模式就会切换另外的一个效果，然后用F12深入了解一下，就发现一个prefers-color-scheme这个新的css类，以前没有了解过，赶紧上网查一下。

在developer.mozilla.org中有提到，感兴趣可以了解一下。

简单了解一下，目前主流的浏览器都开始通过prefers-color-scheme这个css特征来检测操作系统的主题色设置亮色或者暗色。

使用这种方法可以在操作系统或者浏览器更改系统主题时切换到暗色或者亮色，样式实时切换无需刷新，也不同于使用JS代码的定时刷新变更切换，但是这个css特征对部分浏览器兼容不好。

语法

no-preference
表示系统未得知用户在这方面的选项。在布尔值上下文中，其执行结果为 false

light
表示用户已告知系统他们选择使用浅色主题的界面。

dark
表示用户已告知系统他们选择使用暗色主题的界面。

备注： “未得知”、“已告知”等用语，英文原文如此。 “未得知”可理解为：浏览器的宿主系统不支持设置主题色，或者支持主题色并默认为/被设为了未设置/无偏好。 “已告知”为：浏览器的宿主系统支持设置主题色，且被设置为了亮色或者暗色。
目前，若结果为 ，无法通过此媒体特性获知宿主系统是否支持设置主题色，或者用户是否主动将其设置为无偏好。出于隐私保护等方面的考虑，用户或用户代理也可能在一些情况下在浏览器内部将其设置为 。no-preferenceno-preference

关键代码

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

浏览器兼容性

这个兼容性基本兼容了主流浏览器，亲测Chrome、Edge、Firefox这些最新的浏览器都支持。

效果展示

在Chrome、Edge浏览器打开本站，手机或者Windows切换到暗色模式，效果就会实时呈现无需刷新网页。