Change CSS variable using jQuery
<p>Is it possible to change a variable used in CSS using jQuery?
Simple example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>html {
  --defaultColor: teal;
}
.box {
  background: var(--defaultColor);
  width: 100px;
  height: 100px;
  margin: 5px;
  float: left;
}
.circle {
  background: #eee;
  border: 2px solid var(--defaultColor);
  width: 100px;
  height: 100px;
  margin: 5px;
  float: left;
  border-radius: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;button id="clickToChange" type="button" style="width: 100%;"&gt;Click to Change&lt;/button&gt;
&lt;div class="box"&gt;&lt;/div&gt;
&lt;div class="box"&gt;&lt;/div&gt;
&lt;div class="box"&gt;&lt;/div&gt;
&lt;br/&gt;
&lt;div class="circle"&gt;&lt;/div&gt;
&lt;div class="circle"&gt;&lt;/div&gt;
&lt;div class="circle"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>How can I change the variable color from teal to red for example? This one doesn't work.</p>

<pre><code>$("#clickToChange").click(function(){
  $(html).css("--defaultColor", "red");
});
</code></pre>