CSS的未来：配色方案-极客小站

最近有很多关于 “深色” 模式的讨论，iOS、MacOS、Windows和Android都添加了全系统的深色模式，可以自动启用应用程序和程序的深色模式。这种趋势很好，但你的网站不能与这种系统范围内的主题挂钩，这是一个真正的耻辱。或者它能吗？

在我继续之前，我应该指出这个功能是一个建议的功能，目前还没有在任何浏览器中出现。了解这些东西是很好的，甚至可以在你的项目中考虑到这一点，但现在还不要试图把它推广到生产中。

prefers-color-scheme

Mozilla有一个非常全面的所有本地网络技术的清单，这里是他们对该功能的描述。

prefers-color-scheme CSS媒体功能是用来检测用户是否要求系统使用浅色或深色的主题。

让我们稍稍解读一下。我们看到它是一个 CSS media feature ，所以我们知道它是一个媒体查询。我们还可以看到它有两个选项：light 或 dark。

这意味着它看起来会像这样。

@media (prefers-color-scheme: dark) {
:root {
...
}
}

果然，这就是语法。真的很简单!

选项

让我们从Mozilla获得当前的选项列表。

no-preference

表示用户没有向系统提出任何偏好。这个关键词的值在boolean context中被评估为false。

light

表示用户已经通知系统他们喜欢浅色主题的界面。

dark

表示用户已经通知系统他们喜欢深色主题的界面。

如果你看一下spec的草案，有一个脚注说他们也在考虑包括 forced 变量。

ISSUE 8 我们应该包括 ” forced-light “和 ” forced-dark “值吗？我们不一定希望页面试图撤销系统可能正在执行的内容。

实践用途

你们中的一些人可能知道这个网站，dev.to，正在增加一个深色模式的过程中。这个网站也是开源的，所以你们任何人都可以参与进来，帮助这个过程

我已经开始将网站的主要区域转移到CSS变量上，这是故意的，是一个缓慢的推广，但它正在取得进展。

通过这个媒体查询，我们可以做这样的事情。

@media (prefers-color-scheme: dark) {
:root {
--theme-background: #303030;
--theme-top-bar-background: #1C1C1C;
--theme-top-bar-color: #FFFFFF;
--theme-top-bar-search-background: #303030;
--theme-top-bar-search-color: #FFFFFF;
--theme-container-background: #424242;
--theme-container-color: #FFFFFF;
}
}

而且，就像施了魔法一样，整个网站有一个深色的主题，以配合操作系统。

当然，这并不完美，我们还需要一些更多的变量，但你可以看到，根据用户的系统偏好来设计整个网站的主题是多么容易。