一个深色模式的简单 CSS 技巧

开发 前端
让你的网站根据用户选择的主题进行调整的能力是一个很棒的辅助功能。你可能已经熟悉媒体查询了。它们被广泛地用于使网站具有响应性。width 和 height 属性包含视区的尺寸。然后,你可以使用 CSS 在不同的尺寸下呈现不同的布局。

[[433264]]

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

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

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

prefers-color-scheme 媒体查询

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

  1. /* Light mode */
  2. @media (prefers-color-scheme: light) {
  3. :root {
  4. --body-bg: #FFFFFF;
  5. --body-color: #000000;
  6. }
  7. }
  8.  
  9. /* Dark mode */
  10. @media (prefers-color-scheme: dark) {
  11. :root {
  12. --body-bg: #000000;
  13. --body-color: #FFFFFF;
  14. }
  15. }

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

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

  1. /* Light mode */
  2. :root {
  3. --body-bg: #FFFFFF;
  4. --body-color: #000000;
  5. }
  6.  
  7. /* Dark mode */
  8. @media (prefers-color-scheme: dark) {
  9. :root {
  10. --body-bg: #000000;
  11. --body-color: #FFFFFF;
  12. }
  13. }

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

使用 CSS 变量

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

  1. body {
  2. background: var(--body-bg);
  3. color: var(--body-color);
  4. }

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

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

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

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

结论

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

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

 

责任编辑:庞桂玉 来源: Linux中国
相关推荐

2022-07-06 20:01:59

配色方案CSS

2017-05-16 09:55:28

Android调试debug

2010-09-01 13:55:14

CSS

2023-02-13 15:09:01

开发webCSS技巧

2011-03-24 09:34:41

SPRING

2009-07-14 16:02:42

JDBC例子

2020-11-09 06:38:00

ninja构建方式构建系统

2018-04-27 16:00:15

Windows上帝模式

2023-05-24 16:39:30

CSS技巧开发

2024-02-26 08:20:00

CSS开发

2018-11-22 14:09:45

iOS架构组件开发

2009-08-19 04:14:00

线性链表

2023-02-07 10:40:30

gRPC系统Mac

2020-10-15 15:09:27

Seaborn图表数据集

2023-03-06 10:42:34

CSS前端

2023-12-19 13:31:00

CSS前端技巧

2009-07-25 17:24:45

2020-03-26 17:00:53

HashMapputJava

2018-09-18 10:11:21

前端vue.jsjavascript

2010-04-19 17:21:36

Oracle写文件
点赞
收藏

51CTO技术栈公众号