Change CSS variable using jQuery

See question Setting a CSS custom property (aka CSS variable) through JavaScript or jQuery

The method in question is document.body.style.setProperty($property, value); where $property is the CSS variable.

You may change the css variable using plain JavaScript elem.style.setProperty("variableName", "variableProp");

$("html").on('click', function() {
  
  $("body").get(0).style.setProperty("--color", "hotpink");
  
});

body {
  --color: blue;
  background-color: var(--color);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

click me!

Simplest solution IMHO: Change a class, that in turn changes the default color:

html {
  --defaultColor: teal;
}
html.someOtherDefaultColor {
  --defaultColor: rebeccapurple;
}

$("#clickToChange").click(function(){
  $(html).toggleClass("someOtherDefaultColor");
});

Related