<!DOCTYPE html>
<html data-theme="light">
<head>
<style type="text/css">
html[data-theme=light] {
background: #fff;
color: #000;
--buttonBackground: #fefefe;
--buttonBorder: #ccc;
--buttonColor: #001;
}
html[data-theme=dark] {
background: #000;
color: #fff;
--buttonBackground: #101010;
--buttonBorder: #333;
--buttonColor: #fff;
}
html[data-theme=hotdogstand] {
background: #f00;
color: #fff;
--buttonBackground: #ff0;
--buttonBorder: #000;
--buttonColor: #000;
}
button {
background: var(--buttonBackground);
border: var(--buttonBorder) solid 3px;
color: var(--buttonColor);
}
</style>
</head>
<body>
<button id="theme-switch">Switch Theme</button>
This is epic!
<script type="text/javascript">
const themes = ["light", "dark", "hotdogstand"];
const ThemeSwitchButton = document.querySelector("#theme-switch");
const HTML = document.documentElement;
ThemeSwitchButton.addEventListener("click", SwitchTheme);
function SwitchTheme() {
let CurrentTheme = themes.indexOf(HTML.dataset.theme); // Gets how far in the current theme is into the "themes" constant.
if (CurrentTheme + 1 >= themes.length) { // Checks if it's at the end of the array,
HTML.dataset.theme = themes[0]; // If so, reset at the start.
return; // Ends the function here, preventing next bit of code from running.
}
HTML.dataset.theme = themes[CurrentTheme + 1]; // Goes to the next theme.
}
</script>
</body>
</html>