一个深色模式的简单 CSS 技巧
创始人
2024-03-02 08:53:08
0

让你的网站根据用户选择的主题进行调整的能力是一个很棒的辅助功能。

你可能已经熟悉 媒体查询 media query 了。它们被广泛地用于使网站具有响应性。widthheight 属性包含视区的尺寸。然后,你可以使用 CSS 在不同的尺寸下呈现不同的布局。

prefers-color-scheme 媒体查询 的工作方式与此相同。用户可以将他们的操作系统配置为使用浅色或深色主题。prefers-color-scheme 包含这个值。该值是 lightdark ,尽管 W3C 规范指出它可能支持未来的值,如 sepia。我为这两种模式指定不同的 CSS 变量值,让用户的操作系统来决定。

prefers-color-scheme 媒体查询

prefers-color-scheme 媒体查询的两种变化是:

/* Light mode */
@media (prefers-color-scheme: light) {
   :root {
       --body-bg: #FFFFFF;
       --body-color: #000000;
   }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
   :root {
       --body-bg: #000000;
       --body-color: #FFFFFF;
   }
}

在上面的 CSS 中,--body-bg--body-colorCSS 变量。正如你所看到的,它们对两种模式都包含不同的值。在浅色主题中,我设置了一个白色背景和黑色文本。在深色主题中,我设置了黑色背景和白色文本。

因为规范说 W3C 可能会引入未来的值,所以把这个 CSS 转换为默认值是有意义的。

/* Light mode */
:root {
   --body-bg: #FFFFFF;
   --body-color: #000000;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
   :root {
       --body-bg: #000000;
       --body-color: #FFFFFF;
   }
}

在上面的代码中,我默认定义了一个浅色主题,如果媒体查询是 dark,则将其转换为深色主题。这样一来,以后任何添加到媒体查询的值都会默认设置为浅色主题。

使用 CSS 变量

现在我为不同的主题设置了不同的值,我需要实际使用它们来设计页面。

body {
   background: var(--body-bg);
   color: var(--body-color);
}

var() 语法 是 CSS 使用变量的方式。在上面的代码中,我是说把 background 设置为 --body-bg 的值,把 color 设置为 --body-color 的值。注意,这些变量的值来自媒体查询。这意味着背景和前景的颜色是根据操作系统的设置而改变的!

这就是媒体查询的真正能力。提供一个从操作系统到网页的一致的用户体验。

如果你进入 findmymastodon.com,并切换你的操作系统的主题,你会看到从一个主题到另一个主题的过渡。

CSS 工作组 网站也使用同样的媒体查询。改变你的操作系统主题,网站就会切换主题来进行调整。

结论

请注意,使用 prefers-color-scheme 与使用普通的编程语言没有什么不同。我定义了一些变量,这些变量的值根据一些逻辑而改变。而这些变量然后被用于进一步的操作。

让你的网站根据用户选择的主题进行调整的能力是一个很棒的辅助功能。而且,为了用户的利益,它进一步模糊了桌面和网络之间的界限。最新的浏览器版本 支持 prefers-color-scheme,所以你今天就可以开始实验了。

编码愉快。

这篇文章最初发表在 作者的网站 上,经许可后重新发表。


via: https://opensource.com/article/21/10/dark-themes-websites

作者:Ayush Sharma 选题:lujun9972 译者:geekpi 校对:wxy

本文由 LCTT 原创编译,Linux中国 荣誉推出

相关内容

b、i、u、s标签:我们应...
是的,我们应该使用CSS替代这些标签。代码示例:CSS样式.bol...
2025-01-13 00:00:21
不重复的表格页脚,避免在打...
要实现不重复的表格页脚,并避免在打印页面上分页,可以使用以下解决方...
2025-01-12 12:31:26
不知怎么的,我无法覆盖no...
如果你无法覆盖normalize.css,可能是由于以下原因:优先...
2025-01-12 12:30:55
不重复背景图像(使用HTM...
要创建一个不重复的背景图像,您可以使用HTML5的canvas元素...
2025-01-12 12:30:24
不知道组件数量的情况下,纯...
在不知道组件数量的情况下,可以使用纯CSS的堆叠定位和粘性布局来实...
2025-01-12 11:01:13
不知道为什么HTML文件无...
可能是以下几个原因导致HTML文件无法加载CSS:CSS文件路径不...
2025-01-12 09:31:51

热门资讯

使用 KRAWL 扫描 Kub... 用 KRAWL 脚本来识别 Kubernetes Pod 和容器中的错误。当你使用 Kubernet...
Helix:高级 Linux ... 说到 基于终端的文本编辑器,通常 Vim、Emacs 和 Nano 受到了关注。这并不意味着没有其他...
通过 SaltStack 管理... 我在搜索Puppet的替代品时,偶然间碰到了Salt。我喜欢puppet,但是我又爱上Salt了:)...
Epic 游戏商店现在可在 S... 现在可以在 Steam Deck 上运行 Epic 游戏商店了,几乎无懈可击! 但是,它是非官方的。...
如何在 Github 上创建一... 学习如何复刻一个仓库,进行更改,并要求维护人员审查并合并它。你知道如何使用 git 了,你有一个 G...
2024 开年,LLUG 和你... Hi,Linuxer,2024 新年伊始,不知道你是否已经准备好迎接新的一年~ 2024 年,Lin...
Bazzite:专为 Stea... 为 Linux 桌面或者 Steam Deck 做好游戏准备,听起来都很刺激!对于一个专为 Linu...
Motrix:一个漂亮的跨平台... 一个开源的下载管理器,提供了一个简洁的用户界面,同时提供了跨平台操作的所有基本功能。在这里了解关于它...
Bash 脚本中如何使用 he... here 文档 here document (LCTT 译注:here 文档又称作 heredoc ...
使用 dialog 和 jq ... 为何选择文字用户界面(TUI)?许多人每日都在使用终端,因此, 文字用户界面 Text User I...