title: How do I edit a CSS variable using JS?
body: <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>