如何在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。

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

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

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