如何在CSS中使用MacOS Mojave的暗模式？

MacOS Mojave最近发布了暗模式选项

---

有没有一种方法可以通过CSS在web应用程序中使用它？

使用

首选配色方案

媒体查询：

/* Text and background color for light mode */
body {
  color: #333;
}

/* Text and background color for dark mode */
@media (prefers-color-scheme: dark) {
  body {
    color: #ddd;
    background-color: #222;
  }
}

首选配色方案

查询支持三个值：

深色

、

浅色

和

无首选项

不需要多边形填充，如果浏览器不支持，将跳过媒体查询代码

注意：Safari 12.1和Safari Tech Preview 68支持该功能。Mojave附带的Safari 12不支持媒体查询

截至2018年10月，iOS、Chrome和Firefox不支持暗模式