见解 4 - 不要用布尔值来模拟暗黑模式

结论

深色模式现在很流行。几乎所有开发者都在他们的静态 Jamstack 博客上使用它。

然而，有一种常见的误解认为dark mode只有true/ false。我认为用布尔值来模拟暗黑模式是错误的，而且谈论它时dark mode，好像它比其他可能的值更重要modes。

编辑：我可能没能在这篇文章里把我的想法表达清楚。这不仅关乎 CSS 媒体查询，还关乎配色方案模式的建模。

促使我写这篇文章的背景是Docusaurus 的这个问题，这是一个广泛使用的开源项目，将其公共配置 API 从 切换darkMode: true到colorMode: "dark"将会导致数千名用户发生重大变化，因此最好一次性做好。

我同意，如果你在博客或网站上使用布尔模型，那没什么大不了的 ;)

我发现其中一些内容prefers-color-scheme很有趣，所以想和你们分享一下我的发现。

让我们来看一下CSS 媒体特性的规范prefers-color-scheme，并重点介绍其中的几个部分。

light比或更多的值dark

目前，这些值为light或dark。

no-preference这是一个可能的值，但浏览器厂商似乎都回退到该值light。

未来可能会扩展此功能的值（以表达对浅色配色方案的更积极偏好，或对其他类型配色方案（如“棕褐色”）的偏好）。

因此，新的价值观可能会被引入。也许在未来，色盲人士可以要求你使用适合他们情况的配色方案来显示内容。你不想支持他们吗？

用布尔值来表示两个以上的可能值并不是一个好方法。

危险的媒体查询

@media (prefers-color-scheme: dark) {
  .mySelector { backgroundColor: "black" }
}

@media (prefers-color-scheme: light) {
  .mySelector { backgroundColor: "grey" }
}

你可能认为这种媒体查询是安全的，但随着时间的推移，它很可能会破坏某些用户的网站主题。

如果sepia添加并使用该值，您的网站将不会显示指定的两种背景颜色中的任何一种。

因此，使用此媒体功能的最有利于未来的方法是使用否定，例如 (prefers-color-scheme: dark) 和 (not (prefers-color-scheme: dark))，这样可以确保新值至少落入一个样式块中。

实际上，这种情况不应该经常发生，因为您很可能会prefers-color-scheme在应用程序启动时读取内容，并使用 JS 和 CSS 变量处理主题。

用户偏好

另一个常见的误解是，用户偏好只是系统偏好，但事实并非如此。

用户表达偏好的方式多种多样。它可以是操作系统提供的系统级设置，也可以是由用户代理控制的设置。

注：用户偏好也会因媒介而异。例如，用户可能喜欢在发光屏幕上使用深色主题，但在打印时使用浅色主题。

结论

目前，您的博客可能只支持 adark和light模式，这没问题，但随着未来添加新的颜色模式，这种情况还会继续吗？

我希望开发者们再问自己几个问题：

• 你的下一篇博客文章需要标题吗How to add dark mode to your website？出于营销目的，或许需要吧 :)

• 你的开源 Jamstack 插件应该叫什么名字dark mode plugin？

• 深色模式配置是否应该基于布尔值而不是联合类型，例如"dark" | "light"？

这是我的“洞察”系列文章之一（我个人尝试更定期地撰写短文）。欢迎在Twitter、Dev
上关注我，或访问我的网站。