许多操作系统和浏览器现在都已经支持黑暗(深色)模式，比如说：

Chrome自从Chrome 76就开始支持自适应黑暗模式，详细请见：

https://developers.google.cn/web/updates/2019/07/nic76#dark-mode

CSS中的prefers-color-scheme媒体特性用于检测用户启用了系统的色亮色或者暗色主题

下面的一个例子就是实现了body随浏览器黑暗主题自适应。

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

上面的例子也就是如果启用了深色/浅色模式，background-color和color就会随之改变。

prefers-color-scheme具体有三种状态，如下：

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

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

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

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

目前，支持此媒体特性的浏览器有PC的Chrome(76)、Edge(79)、Firefox(67)、Opera(62)、Safari(12.1)

移动端的Android webview(76)、Chrome for Android(76)、Opera for Android(54)、Safari on iOS(13)

后续可能会有更多的浏览器对此支持。总之，这项媒体特性使得黑暗模式自适应的实现变得非常方便。