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.56 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=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
35
<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
54
</html>