14行代码实现深浅色主题切换
该解决方案不使用 JavaScript
,因此我们并没有实现如何切换深浅色模式。相反,这种方式使用 CSS
媒体查询检测用户的系统设置,并使用两个自定义 CSS
属性来确定基本配色方案。
声明2个CSS自定义属性
CSS
自定义属性也称为CSS 变量或级联变量。我们可以在 CSS
文件中的任何位置定义 CSS
的自定义属性,它们遵循与其他 CSS
规则相同的级联和特异性模式。例如,我们可以在文档根目录定义 CSS
变量,并在更具体的 CSS
文件中覆盖它们。而且更简单的是,我们还可以在浏览器开发工具中检查和调试声明的 CSS
变量,这些样式表规则变量入下图所示:
CSS
自定义属性由前缀为两个破折号 (--
) 的单词声明,并通过 var()
函数进行访问。
:root {
--my-color-variable: #000000;
}
.element {
color: var(--my-color-variable);
/* 会被解析成 color: #000000 */
}
同时还可以将第二个参数传递到函数中var()
,当我们尝试使用自定义属性但是这个自定义属性并不存在,这个参数将充当后备值。
.element {
color: var(--my-new-color, #ff0000);
/* 会被解析成 color: #ff0000 */
}
对于文章中介绍的这种深浅色模式切换方案,首先需要在文档根(:root
)中定义两个颜色变量 - 一个用于前景色,一个用于背景色。我倾向于默认选择深色模式,因此我将背景颜色(--color-bg
)设置为黑色,前景色 (--color-fg
)设置为白色。
:root {
--color-bg: #000000;
--color-fg: #ffffff;
}
使用prefers-color-scheme媒体查询
使用 CSS
媒体查询中的 prefers-color-scheme
方法连接到系统设置,并翻转背景和前景色的变量声明。当检测到浅色主题设置时,以下代码将 设为--color-bg
白色,--color-fg
将设为黑色。
@media (prefers-color-scheme: light) {
:root {
--color-bg: #ffffff;
--color-fg: #000000;
}
}
在body上添加样式
最后一步就是在标签上使用 CSS
自定义属性.
在 HTML
元素的 body
标签上设置background-color
(页面颜色)和 color
(文本颜色),如果不被覆盖,所有子元素都将继承它们。
body {
background-color: var(--color-bg);
color: var(--color-fg);
}
以下是完整的css
代码:
: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);
}