<div class="parent">
  <div class="child">Hello CSS Variables</div>
</div>
<button onclick="document.documentElement.classList.toggle('blue')">Toggle theme</button>
html {
  --my-primary: red;
  --my-secondary: blue;
}

html.blue {
  --my-primary: blue;
  --my-secondary: red;
}

.child {
  color: var(--my-primary);
  background: var(--my-secondary);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.