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

Question

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

有没有办法通过 CSS 在网络应用中使用它？

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 不支持深色模式。