<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<h2>CSS Custom Properties in JavaScript</h2>
<p>In this example you can see how the values of the variables are edited by JavaScript.</p>
<div id="button" onclick="setProperty()">change color</div>
<p></p>
<div id="reset" onclick="removeProperty()">Reset <i class='fas fa-undo'></i></div>
:root { --color: red; }

#button {
    color: white;
    width: 150px;
    height: 40px;
    border-radius: 10px;
    background-color: var(--color);
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
    margin: auto;
    cursor: pointer;
}

#reset {
    margin: 10px;
    color: white;
    width: 100px;
    height: 30px;
    border-radius: 5px;
    background-color: black;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    margin: auto;
    cursor: pointer;
}

h1 {text-align: center}
h2 {text-align: center}
p {text-align: center}
function setProperty() {
  document.documentElement.style.setProperty('--color', 'blue')
  document.getElementById("button").innerHTML = "";
};

function removeProperty() {
  document.documentElement.style.removeProperty('--color')
  document.getElementById("button").innerHTML = "change color";
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.