JSFiddle - React, Tailwind, and code Playground

changing css variables with javascript

by Travis Almand

HTML

<button class='red'>red</button>
<button class='blue'>blue</button>
<div></div>

CSS

:root {
  --base: green;
}

div {
  background-color: var(--base);
  height: 100px;
  width: 100px;
}

JavaScript

$('button').on('click', function () {
	document.documentElement.style.setProperty(`--base`, $(this).attr('class'));
});

var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--base');