Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Multiple themes using css variables
<!DOCTYPE html>
.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;
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];
currentTheme = newTheme;
// Store the new theme in local storage
localStorage.setItem("mytheme", newTheme);
<body class="default">
Choose your theme
<select id="theme-selector">
<option value="default">Default</option>
<option value="dark">Dark mode</option>
<div class="primary-div">Primary Color</div>
<div class="secondary-div">Secondary Color</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment