How to change CSS :root color variables in JavaScript

Question

Alright, I'm creating a system for my webpage that allows users to change the theme. How I want to accomplish this is by having all the colors as variables, and the colors are set in the :root part of the CSS.

What I want to do is change those colors via JavaScript. I looked up how to do it, but nothing that I attempted actually worked properly. Here's my current code:

CSS:

:root {   --main-color: #317EEB;   --hover-color: #2764BA;   --body-color: #E0E0E0;   --box-color: white; } 

JS:

(Code to set the theme, it's ran on the click of a button) - I didn't bother adding the :root change to the other 2 themes since it doesn't work on the Dark theme

function setTheme(theme) {   if (theme == 'Dark') {     localStorage.setItem('panelTheme', theme);     $('#current-theme').text(theme);     $(':root').css('--main-color', '#000000');   }   if (theme == 'Blue') {     localStorage.setItem('panelTheme',  'Blue');     $('#current-theme').text('Blue');     alert("Blue");   }   if (theme == 'Green') {     localStorage.setItem('panelTheme', 'Green');     $('#current-theme').text('Green');     alert("Green");   } } 

(Code that is ran when the html is loaded)

function loadTheme() {   //Add this to body onload, gets the current theme. If panelTheme is empty, defaults to blue.   if (localStorage.getItem('panelTheme') == '') {     setTheme('Blue');   } else {     setTheme(localStorage.getItem('panelTheme'));     $('#current-theme').text(localStorage.getItem('panelTheme'));   } } 

It shows the alert, but does not actually change anything. Can someone point me in the right direction?

Answer 1

Thank you @pvg for providing the link. I had to stare at it for a little to understand what was going on, but I finally figured it out.

The magical line I was looking for was this:

document.documentElement.style.setProperty('--your-variable', '#YOURCOLOR'); 

That did exactly what I wanted it to do, thank you very much!