网站换肤是很常见的功能，其本质就是定义一系列主题规范，接着在写样式的时候，通过变量来控制具体样式，最后修改data自定义属性值来达到换肤的效果。
代码中运用到的知识点有以下：
var() 是 CSS 中用于引用 CSS 变量（custom properties）的函数。CSS 变量允许你在样式表中定义可重用的值，从而提高代码的可维护性和灵活性。
前缀 -- 表示这是一个变量。
在 DOM 元素中，data-* 属性用于存储自定义数据。它们允许在 HTML 元素上存储额外的信息，而不需要使用其他属性或 JavaScript 对象。data-* 属性的命名规则是以 data- 开头，后面可以跟任意有效的属性名称。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
:root {
--theme-color: #5b88db;
--primary: #5b88db;;
--dark: #1e2a34;
--lime:#a0d911;
--yellow: #fff566;
--cyan:#13c2c2;
}
[data-theme="dark"] {
--theme-color: var(--dark);
}
[data-theme="lime"] {
--theme-color: var(--lime);
}
[data-theme="yellow"] {
--theme-color: var(--yellow);
}
[data-theme="cyan"] {
--theme-color: var(--cyan);
}
body {
background-color: var(--theme-color);
color: var(--text-color);
display: flex;
justify-content: center;
align-items: center;
margin-top: 100px;
}
.tool-container {
display: flex;
}
.color-btn {
width: 50px;
height: 50px;
border: 1px solid #eee;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin-right: 20px;
}
.primary {
background-color: var(--primary);
}
.dark {
background-color: var(--dark);
}
.lime {
background-color: var(--lime);
}
.yellow {
background-color: var(--yellow);
}
.cyan {
background-color: var(--cyan);
}
</style>
</head>
<body>
<div class="tool-container">
<div class="color-btn primary" data-theme="primary"></div>
<div class="color-btn dark" data-theme="dark"></div>
<div class="color-btn lime" data-theme="lime"></div>
<div class="color-btn yellow" data-theme="yellow"></div>
<div class="color-btn cyan" data-theme="cyan"></div>
</div>
</body>
<script>
const toolDOM = document.querySelector(".tool-container");
const root = document.documentElement;
toolDOM.addEventListener("click", (e) => {
const theme = e.target.getAttribute("data-theme");
root.dataset.theme = theme;
})
</script>
</html>
|
ok是不是很简单呢？
我的微信公众号： 梨的前端小屋
