How to change CSS: root color variables in JavaScript

Question

Well, I am creating a system for my web page that allows users to change the theme. How I want to achieve this, having all the colors as variables, and the colors are set at the root of the CSS.

What I want to do is change these colors using JavaScript. I looked at how to do this, but none of what I tried really worked correctly. Here is my current code:

CSS

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

JS:

(The code for installing the theme, it was launched with the click of a button) - I did not add changes: the root to two other themes, since it does not work on a 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 starts when html loads)

 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 a warning, but actually does not change anything. Can someone point me in the right direction?

Answer 1

Thanks @pvg for the link provided. I had to look at him a little to understand what was happening, but I finally figured it out.

The magic line I was looking for was this:

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

This is exactly what I wanted to do, thank you very much!