A mirror of my website's source code.

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 theme-change-final.html

View raw Download
text/html • 1.76 kiB
HTML document, ASCII text
        
            
1
<!DOCTYPE html>
2
<html data-theme="light">
3
4
<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
35
<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
54
</html>