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=clown] {
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="theme-switch">Switch Theme</button>
37
This is epic!
38
<script type="text/javascript">
39
const themes = ["light", "dark", "clown"];
40
const ThemeSwitchButton = document.querySelector("#theme-switch");
41
const HTML = document.documentElement;
42
ThemeSwitchButton.addEventListener("click", SwitchTheme);
43
function SwitchTheme() {
44
let CurrentTheme = themes.indexOf(HTML.dataset.theme); // Gets how far in the current theme is into the "themes" constant.
45
if (CurrentTheme + 1 >= themes.length) { // Checks if it's at the end of the array,
46
HTML.dataset.theme = themes[0]; // If so, reset at the start.
47
return; // Ends the function here, preventing next bit of code from running.
48
}
49
HTML.dataset.theme = themes[CurrentTheme + 1]; // Goes to the next theme.
50
}
51
</script>
52
</body>
53
</html>