最近有很多关于 “深色” 模式的讨论,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; } }
而且,就像施了魔法一样,整个网站有一个深色的主题,以配合操作系统。
当然,这并不完美,我们还需要一些更多的变量,但你可以看到,根据用户的系统偏好来设计整个网站的主题是多么容易。
小结
正如我在文章前面所说,这不是我们所拥有的东西,而且它还没有一个ETA,但像这样的功能推动了网络的发展 如果我们在它登陆时已经准备好了,我们可以帮助把这个功能推广出去。
对于CSS,如果浏览器不理解你所写的东西,它就会被忽略。因此,一旦它在一个浏览器中出现,就立即把它推出去并做好准备,这真的没有什么坏处。
Sources:
developer.mozilla.org
drafts.csswg.org
原文地址:https://www.wbolt.com/color-scheme.html