CSS 中的暗黑模式

随着 macOS 中暗黑模式 的引入，Safari 技术预览版 68 发布了一项名为 prefers-color-scheme 的新功能，它允许我们使用媒体查询检测用户是否启用了暗黑模式。Safari 技术预览版 71 还具有 supported-color-schemes，它……好吧，我无法确切地告诉你它有什么作用。

媒体查询如下所示

@media (prefers-color-scheme: dark) {

}

它可能尚未在所有地方都得到支持，但它是一个很棒的渐进增强，它以一种良好/智能/符合标准的方式实现，因此可以安全地开始使用。就像 prefers-reduced-motion 一样！

不仅仅是设置深色背景和浅色文字……

最近，Mark Otto 描述了 我们如何开始使用 prefers-color-scheme 来创建能够动态适应新用户设置的主题。这篇博文的巧妙之处在于，Mark 将其视为一个可访问性问题，并展示了如何在自己的网站上使用它来调整图像，使其对用户而言不至于太亮。

@media (prefers-color-scheme: dark) {
  img {
    opacity: .75;
    transition: opacity .5s ease-in-out;
  }
  img:hover {
    opacity: 1;
  }
}

在上面的代码中，Mark 使用媒体查询检测用户是否启用了暗黑模式，然后使图像变暗，使其与深色背景相匹配。

CSS 自定义属性可能很有用

这让我想起了 Marcin Wichary 的一篇优秀的博文，他在其中 探索了类似的技术，并更进一步添加了各种过滤器以确保它们具有更高的对比度。

html {
  --text-color-normal: #0a244d;
  --text-color-light: #8cabd9;
}

html[data-theme='dark'] {
  --text-color-normal: hsl(210, 10%, 62%);
  --text-color-light: hsl(210, 15%, 35%);
  --text-color-richer: hsl(210, 50%, 72%);
  --text-color-highlight: hsl(25, 70%, 45%);
}

这并不意味着您必须放弃您的品牌

Andy Clarke 还写了一些关于如何利用这项新奇的 CSS 功能以及我们如何 在我们的网站上应用暗黑主题 的想法。他描述了如何选择颜色，使我们的浅色/深色主题在品牌方面保持一致，以及我们可能希望如何为深色背景使用更轻的字体粗细。他写道

暗黑模式的设计不应止步于选择更暗的颜色。您还应该考虑更改排版样式以保持使用暗黑模式的人员的可读性。深色背景上的浅色文本的对比度高于相同颜色反转时的对比度，因此，为了使您的暗黑模式设计更容易阅读，您需要为文本添加更多白色/暗色空间。

如果您的字体提供更轻的粗细，则在暗黑模式设计中使用它将打开字母形式并使其看起来更分散……

那是怎么回事？听起来像是来自世界各地排版极客和设计师的欢呼声！

关乎包容性设计

Charles Reynolds-Talbot 撰写了关于他的朋友 Molly 的文章，Molly 难以应对黑色文本的高对比度白色背景。

假设样式切换器是解决此问题的方案，这并不是什么新鲜事。这只是不再流行的东西。但这不应是关于时尚，而是关于所有人的包容性设计。为 Molly 解决此问题实际上也将为其他人解决问题。暗黑模式对于患有偏头痛、宿醉或只是在晚上关灯躺在床上浏览网页的人来说会更好。为少数人设计，可以让许多人受益。

默认情况下使用暗黑模式

请记住，您可以将其反转并默认使用暗黑模式，但如果用户明确希望使用浅色主题，则可以更改为浅色主题。

body {
  background-color: black;
  color: white;
}
@media screen and (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}