14 行 CSS 代码实现明暗模式

2024-05-12 22:12:46

最近我打算对我的个人网站添加明暗模式的自动检测。这个解决方案不使用 JavaScript。相反，它通过CSS 媒体查询来检测用户的系统设置，并使用两个自定义CSS属性来确定一个基本的配色方案。

定义 2 个自定义的 CSS 属性

CSS 自定义属性也被称为 CSS变量或级联变量。你可以在 CSS 文件的任何地方定义 CSS 自定义属性，它们遵循与其他 CSS 规则相同的级联和特定模式。例如，您可以在 document root 中定义 CSS 变量，并在更具体的 CSS类中覆盖它们。您还可以检查和调试浏览器开发工具中声明的CSS变量，这些变量显示在样式表规则下面。

CSS自定义属性由前缀为两个破折号(——)的单词声明组成，并使用var()函数访问。

:root {--my-color-variable: #000000;
}.element {color: var(--my-color-variable);
}

您还可以向 var() 函数传递第二个参数，当您尝试使用自定义属性时，如果自定义属性不存在，它将充当回退值。

.element {color: var(--my-new-color, #ff0000);
}

对于这种明/暗模式解决方案，在文档根 document.root 定义两个颜色变量—一个用于前景色，一个用于背景色。我倾向于默认选择暗模式，所以我将背景色设置为黑色(--color-bg)，前景色设置为白色(--color-fg)。

:root {--color-bg: #000000;--color-fg: #ffffff;
}

媒体查询：prefers-color-scheme

接下来，我们将使用 preferences-color-scheme CSS 媒体查询连接到系统设置。当检测到 light 主题设置时，下面的代码将--color-bg设置为白色，--color-fg设置为黑色。

@media (prefers-color-scheme: light) {:root {--color-bg: #ffffff;--color-fg: #000000;}
}

添加 body 样式

最后，使用 CSS 自定义属性，设置 HTML 主体元素的背景颜色(页面颜色)和文本颜色，如果没有覆盖，所有的子元素都将继承它们。

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

现在，你已经实现了明暗模式的支持。快自己写一个例子试试吧~

完整代码

:root {--color-bg: #000000;--color-fg: #ffffff;
}
@media (prefers-color-scheme: light) {:root {--color-bg: #ffffff;--color-fg: #000000;}
}
body {background-color: var(--color-bg);color: var(--color-fg);
}

14 行 CSS 代码实现明暗模式相关推荐

html表格垂直居中的CSS代码,使用3行CSS代码使任何元素垂直居中
在页面设计中,使元素水平居中是比较简单的事情.但是如何使元素垂直居中呢?其实,我们通过3行CSS代码(不包括添加浏览器厂商所需的代码)就可以使任何元素垂直居中.秘诀就是使用transform: tra ...
读懂python代码_读懂花里胡哨的14行Python代码！
最近在项目里发现一段代码,初看比较难看懂,细看,也还是比较难看懂.遂研究了一下,证实了这段代码确实,没啥作用,遂删之.记录在下. 去掉几个用于封装的函数,保留最小代码后,剩下以下14行代码.你能说出这 ...
神级程序员8000行css代码画出一个蒙娜丽莎，堪比达芬奇！
代码画出的蒙娜丽莎今天逛CODEPEN找HTML5动画案例的时候,偶尔看到一位神级大师的作品,用纯CSS代码画出一副蒙娜丽莎,虽然分辨率不高,但是仍然让我很是震撼,一看代码,整整8000行,基本一行 ...
15行CSS代码就可以让你的手机软重启
一个搞安全研发的开发者设计了一段15行的代码,只要你使用Safari点击打开就会出现软重启,也就是 Springboard 崩溃, 这个代码主要是引起的是 Webkit的崩溃. 所有可以渲染HTML页 ...
今天是七夕节、用100行CSS代码下一场流星雨、许一个愿、来一场美丽的邂逅
今天是七夕节.用100行代码下一场流星雨.许一个愿.来一场美丽的邂逅这个程序的核心使用CSS实现,基本原理就是利用CSS控制若干个div,本例是50个,当然,你可以弄更多的div,不过适当的流星是浪 ...
python写的小巧的（14行有效代码）随机密码生成小脚本工具
工作中经常要生成随机密码,参考了一些网上的做法,自己用python写了个小脚本,非常小巧. #! /usr/bin/env python # -*- coding: utf-8 -*- #@autho ...
一步到位：三行CSS代码轻松实现全网站暗黑模式
本文首发于微信公众号:大迁世界, 我的微信:qq449245884,我会第一时间和你分享前端行业趋势,学习途径等等. 更多开源作品请看 GitHub https://github.com/qq4492 ...
iOS知识分享 — iOS 13上的暗模式
我们将本周的文章献给那些庆祝这个受人尊敬的假期的人,无论是同时还是在iOS 13进入通用汽车的过程中.我们希望一些快速提示可以帮助您避开即将到来的阴影. 暗模式是一种外观偏好,告诉系统和参与的应用程序 ...
全库模式用户模式表模式_暗模式，亮模式和用户的故事
全库模式用户模式表模式 I have been working on designing a UI for an app that has individuals over the age of ...

最新文章

热门文章