css - 如何在带有 MacOS Mojave 的 CSS 中使用暗模式？

Question

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

有没有办法通过 CSS 在 Web 应用程序中使用它？

Answer 1

使用prefers-color-scheme媒体查询：

/* 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;
  }
}

该prefers-color-scheme查询支持三个值：dark、light和no-preference。

不需要 polyfill，如果您的浏览器不支持，媒体查询代码将被跳过。

注意：它在Safari 12.1和 Safari Tech Preview 68 中受支持。Mojave 附带的 Safari 12 不支持媒体查询。

自 2018 年 10 月起，iOS、Chrome 和 Firefox 不支持深色模式。