How do I edit a CSS variable using JS?
<p>I have these CSS variables to control the colors of my project so I can do theming. </p>

<pre><code>html {
    --main-background-image: url(../images/starsBackground.jpg);
    --main-text-color: #4CAF50;
    --main-background-color: rgba(0,0,0,.25);
    --beta-background-color: rgba(0,0,0,.85);
}
</code></pre>

<p>However no matter how I try to change the attribute(the two commented lines tried separately), the closest I get is returning not a valid attribute.</p>

<pre><code>function loadTheme() {
    var htmlTag = document.getElementsByTagName("html");
    var yourSelect = document.getElementById( "themeSelect" );
    var selectedTheme = ( yourSelect.options[ yourSelect.selectedIndex ].value );
    // htmlTag[0].setAttribute('--main-text-color', '#FFCF40');
    // $("html").css("--main-text-color","#FFCF40");
}
</code></pre>

<p><img src="https://i.stack.imgur.com/YMMJL.png" alt="the error message"></p>