Esta pergunta já tem uma resposta aqui:

É possível alterar uma variável usada em CSS usando jQuery? Exemplo simples:

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%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clickToChange" type="button" style="width: 100%;">Click to Change</button>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br/>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

Como posso alterar a cor variável de verde-azulado para vermelho, por exemplo? Este não funciona.

$("#clickToChange").click(function(){
  $(html).css("--defaultColor", "red");
});