<div id="box"></div>
<button id="change">Change</button>
:root {
    --primaryColor: white;
    --secondaryColor: black;
}
body, button {
    background-color: var(--primaryColor);
}
p, button {
    color: var(--secondaryColor);
}
#box {
    margin-bottom: 15px;
    width: 150px;
    height: 120px;
    background-color: var(--secondaryColor);
    box-shadow: 5px 5px 5px 0px var(--secondaryColor);
}
const themes = {
    light: {
        '--primaryColor': 'white',
        '--secondaryColor': 'black'
    },
    dark: {
        '--primaryColor': 'black',
        '--secondaryColor': 'white'
    },
	red: {
		'--primaryColor': 'red',
		'--secondaryColor': 'white'
	}
}
var themeIndex = 0;
document.getElementById('change').addEventListener('click',function(){
	themeIndex++;
	var themeCount = Object.keys(themes).length;
    themeIndex = themeIndex <= themeCount-1 ? themeIndex : 0;
    var theme = themes[Object.keys(themes)[themeIndex]];
    activateTheme(theme);
});

function activateTheme(theme){
    for (let prop in theme){
        document.querySelector(':root').style.setProperty(prop, theme[prop]);
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.