本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！
大家好，我是大澈！
本文约 800+ 字，整篇阅读约需 1 分钟。
今天分享一段优质 CSS 代码片段，轻松实现一键切换主题颜色，在任何项目中都可用。
老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！
[data-theme='default'] {
--font-primary: #fff;
--background-main: #0678be;
}
[data-theme='black'] {
--font-primary: #fff;
--background-main: #393939;
}
<html lang="en" data-theme="default"></html>
body {
color: var(--font-primary);
background-color: var(--background-main);
}
分享原因
这段代码可以轻松实现网页主题的切换，且在各种项目中通用。
先定义不同主题的 CSS 变量，再通过 JavaScript 动态更改 data-theme 属性，从而实现页面样式的动态变化。
这种方法不仅简化了主题管理，还提高了代码的可读性和维护性，是我们项目中一般且常用的实现方式之一。
代码解析
1. 定义主题变量
CSS变量：声明自定义CSS属性，它包含的值可以在整个文档中重复使用。属性名需要以两个减号（--）开始，属性值则可以是任何有效的 CSS 值。
CSS属性选择器：匹配具有特定属性或属性值的元素。例如[data-theme='black']，将选择所有 data-theme 属性值为 'black' 的元素。
使用 [data-theme='default'] 和 [data-theme='black'] 选择器，根据 data-theme 属性的值定义不同的主题样式。
定义了两个 CSS 变量 --font-primary 和 --background-main，分别表示字体颜色和背景颜色。
2. 指定默认主题
在 <html> 元素上添加 data-theme="default"，指定默认主题为 default 。
后面用 js 动态切换 data-theme 属性值，然后 CSS 属性选择器将自动选择对应的 CSS 变量。
3. 应用 CSS 变量
Var函数：用于使用 CSS 变量。第一个参数为 CSS 变量名称，第二个可选参数作为默认值。
使用 var(--font-primary) 和 var(--background-main) 来引用之前定义的 CSS 变量。
这里设置 body 元素的 color 和 background-color 属性，分别引用 --font-primary 和 --background-main 变量，在项目中按需设置对应的元素即可。
3885
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
