Multiple themes using css variables
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<style> | |
.default { | |
--primary-color: #f00; | |
--secondary-color: #000; | |
--background-default: #efefef; | |
--background-paper: #fff; | |
} | |
.dark { | |
--primary-color: #0f0; | |
--secondary-color: #fff; | |
--background-default: #444; | |
--background-paper: #111; | |
} | |
body { | |
background: var(--background-default); | |
} | |
.primary-div { | |
background: var(--primary-color); | |
width: 250px; | |
height: 250px; | |
} | |
.secondary-div { | |
background: var(--secondary-color); | |
width: 250px; | |
height: 250px; | |
} | |
</style> | |
<script> | |
window.onload = function() { | |
// Try to read from local storage, otherwise set to default | |
let currentTheme = localStorage.getItem("mytheme") || "default"; | |
setTheme("default", currentTheme); | |
const themeSelector = document.getElementById("theme-selector"); | |
themeSelector.value = currentTheme; | |
themeSelector.addEventListener("change", function(e) { | |
const newTheme = e.currentTarget.value; | |
setTheme(currentTheme, newTheme); | |
}); | |
function setTheme(oldTheme, newTheme) { | |
const body = document.getElementsByTagName("body")[0]; | |
body.classList.remove(oldTheme); | |
body.classList.add(newTheme); | |
currentTheme = newTheme; | |
// Store the new theme in local storage | |
localStorage.setItem("mytheme", newTheme); | |
} | |
}; | |
</script> | |
<body class="default"> | |
<div> | |
Choose your theme | |
<select id="theme-selector"> | |
<option value="default">Default</option> | |
<option value="dark">Dark mode</option> | |
</select> | |
</div> | |
<div class="primary-div">Primary Color</div> | |
<div class="secondary-div">Secondary Color</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment