快速提示：如何使用媒体查询在网站中实施暗模式

在此Envato Tuts +快速提示中，我们将看一下一个实验性CSS功能，该功能可检测用户是否在Mac上启用了“暗模式”。 这是通过媒体查询完成的，可让您相应地将网站设置为“深色”或“浅色”。 让我们来看看！

如何通过CSS实现“黑暗模式”

什么是“黑暗模式”？

去年，MacOS Mojave引入了一种在“暗”和“亮”外观之间切换的方法（暗模式在眼睛上更容易，尤其是在弱光条件下）。 这种切换会影响UI，从而改变元素的视觉外观，例如菜单栏，面板，按钮等。

除MacOS UI之外，此设置还向其他应用程序开放，因此利用此设置的应用程序还将根据用户的喜好在深色和浅色版本之间切换。

CSS中的“暗模式”

使用

prefers-color-scheme

媒体查询，我们也可以在我们的网站中利用这种暗模式设置。 语法如下所示：

@media (prefers-color-scheme: dark) {
     body {
    	/* dark styles here */
  	}
}
           

我们可以在媒体查询中使用

dark

或

light

作为值。 在上面的示例中，我们要说明的是，如果用户启用了暗模式，我们将应用一些不同的样式。 通过切换暗/亮外观尝试以下演示：

注意事项

请注意：这都是高度实验性的。 撰写本文时，此功能仅可在以下浏览器中使用： Safari Technology Preview 。 但是，它正在工作组中进行讨论，并且我们已经在Webkit源代码中看到了它。

结论

就是这个快速提示！ 你对此有什么想法？ 这应该是我们在网站上实施的吗？ 你会用吗？ 媒体查询是否超出了应使用的范围？ 让我们知道！

翻译自: https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-implement-dark-mode-in-your-website-using-media-queries--cms-32533