HTML document, ASCII text
1
<!DOCTYPE html>
2
<html data-theme="light">
3
<head>
5
<style type="text/css">
6
html[data-theme=light] {
7
background: #fff;
8
color: #000;
9
--buttonBackground: #fefefe;
10
--buttonBorder: #ccc;
11
--buttonColor: #001;
12
}
13
html[data-theme=dark] {
14
background: #000;
15
color: #fff;
16
--buttonBackground: #101010;
17
--buttonBorder: #333;
18
--buttonColor: #fff;
19
}
20
html[data-theme=gamer] {
21
background: #f00;
22
color: #00f;
23
--buttonBackground: #050;
24
--buttonBorder: #0a0;
25
--buttonColor: #0f0;
26
}
27
button {
28
background: var(--buttonBackground);
29
border: var(--buttonBorder) solid 3px;
30
color: var(--buttonColor);
31
}
32
</style>
33
</head>
34
<body>
36
<button id="themeSwitch">Switch Theme</button>
37
This is epic!
38
<script type="text/javascript">
39
console.log("Changing theme")
40
const themes = ["light", "dark", "gamer"];
41
document.querySelector("#themeSwitch").addEventListener("click", function() {
42
console.log("Changing theme")
43
let curTheme = themes.indexOf(document.documentElement.dataset.theme);
44
if (curTheme + 1 >= themes.length) {
45
document.documentElement.dataset.theme = themes[0];
46
return;
47
}
48
console.log("asfd")
49
document.documentElement.dataset.theme = themes[curTheme + 1];
50
})
51
</script>
52
</body>
53
</html>