-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo3.html
85 lines (70 loc) · 4.33 KB
/
demo3.html
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
85
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
:root {
--nav-color: #292929;
--bg-color: #ffffff;
}
[data-theme="dark"] {
--nav-color: #292929;
--bg-color: #ffffff;
}
[data-theme="light"] {
--nav-color: #292929;
--bg-color: #ffffff;
}
.theme-swich {
display: inline-block;
cursor: pointer;
}
.theme-swich .mode-contaniner {
display: flex;
}
#checkbox {
display: none;
}
#checkbox:checked+.mode-contaniner.light {
display: inline-block;
}
#checkbox+.mode-contaniner .mode-contaniner.light {
display: none;
}
#checkbox:checked+.mode-contaniner.dark {
display: inline-block;
}
#checkbox+.mode-contaniner .mode-contaniner.dark {
display: none;
}
body {
background-color: var(--bg-color);
}
.theme-switch svg {
fill: var(--nav-color)
}
</style>
<body>
<label class="theme-switch" for="checkbox">
<input class="checkbox"id="checkbox">
<span class="mode-container ">
<svg t="1621513134022" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3503" width="30" height="30"><path d="M486.4 767.6416c-126.8224 0-230.0416-103.168-230.0416-230.0416S359.5264 307.5584 486.4 307.5584s230.0416 103.168 230.0416 230.0416-103.168 230.0416-230.0416 230.0416z m0-408.8832c-98.6112 0-178.8416 80.2304-178.8416 178.8416s80.2304 178.8416 178.8416 178.8416 178.8416-80.2304 178.8416-178.8416S585.0112 358.7584 486.4 358.7584zM486.4 256a25.6 25.6 0 0 1-25.6-25.6v-153.6a25.6 25.6 0 0 1 51.2 0v153.6a25.6 25.6 0 0 1-25.6 25.6zM486.4 1024a25.6 25.6 0 0 1-25.6-25.6v-153.6a25.6 25.6 0 0 1 51.2 0v153.6a25.6 25.6 0 0 1-25.6 25.6zM179.2 563.2h-153.6a25.6 25.6 0 0 1 0-51.2h153.6a25.6 25.6 0 0 1 0 51.2zM947.2 563.2h-153.6a25.6 25.6 0 0 1 0-51.2h153.6a25.6 25.6 0 0 1 0 51.2zM230.4 307.2a25.7024 25.7024 0 0 1-18.1248-7.4752l-102.4-102.4a25.6 25.6 0 0 1 36.1984-36.1984l102.4 102.4A25.6 25.6 0 0 1 230.3488 307.2zM128 921.6a25.6 25.6 0 0 1-18.1248-43.6736l102.4-102.4a25.6 25.6 0 0 1 36.1984 36.1984l-102.4 102.4a25.4976 25.4976 0 0 1-18.1248 7.4752zM844.8 921.6a25.7024 25.7024 0 0 1-18.1248-7.4752l-102.4-102.4a25.6 25.6 0 0 1 36.1984-36.1984l102.4 102.4a25.6 25.6 0 0 1-18.1248 43.6736zM742.4 307.2a25.6 25.6 0 0 1-18.1248-43.6736l102.4-102.4a25.6 25.6 0 0 1 36.1984 36.1984l-102.4 102.4a25.4976 25.4976 0 0 1-18.1248 7.4752z" fill="" p-id="3504"></svg>
<svg t="1621510119020" class="dark" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2494" width="30" height="30"><path d="M524.490551 1023.43355c-140.102939 0-271.81403-54.547017-370.878782-153.611769S0 639.045939 0 498.943c0-115.183242 36.995772-223.867918 106.944903-314.336142a523.825343 523.825343 0 0 1 119.276826-112.266563A533.035909 533.035909 0 0 1 376.55863 1.11192a25.584905 25.584905 0 0 1 30.036679 36.228225c-33.004527 64.320451-48.35547 125.621883-48.355471 193.012523 0 239.832899 195.110485 434.943383 434.943384 434.943383 67.39064 0 128.692072-15.350943 193.012523-48.35547a25.584905 25.584905 0 0 1 36.228225 30.036678 534.468663 534.468663 0 0 1-71.228375 150.336902 523.825343 523.825343 0 0 1-112.266563 119.276826 509.395457 509.395457 0 0 1-314.336142 106.944903zM336.18565 69.884144C163.538712 143.82452 51.16981 309.819383 51.16981 498.943 51.16981 759.90903 263.524521 972.26374 524.490551 972.26374c189.123617 0 355.11848-112.420072 429.058855-285.01584A451.98293 451.98293 0 0 1 793.132052 716.414691c-129.868977 0-251.908974-50.555772-343.707612-142.354411S307.018859 360.170475 307.018859 230.301498c0-55.109885 9.619924-108.019469 29.166791-160.417354z" fill="" p-id="2495"></svg>
</span>
</label>
<script>
var btn = document.getElementById("checkbox")
bth.onchange = function(evn) {
if (evn.target.document) {
document.documentElement.setAttribute("data-theme", "dark")
} else {
document.documentElement.setAttribute("data-theme", "light")
}
}
</script>
</body>
</html>