<body>
    <p>Hello world!</p>
    <div id="box">
    </div>
    <button onclick="toggleTheme()" style="float:left;">Toggle Theme</button>
</body>
body, body[data-theme="light"] {
    --primaryColor: white;
    --secondaryColor: black;
}
body[data-theme="dark"] {
    --primaryColor: black;
    --secondaryColor: white;
}
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);
}
function toggleTheme(){
    // Default to light theme, since that is starting theme
    window.theme = typeof(window.theme)==='string' ? window.theme : 'light';
    var switchToTheme = window.theme === 'light' ? 'dark' : 'light';
    window.theme = switchToTheme;
    document.querySelector('body').setAttribute('data-theme',switchToTheme);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.