Come modificare CSS: variabili di colore radice in JavaScript

Question

OK, sto creando un sistema per la mia pagina Web che consente agli utenti di modificare il tema. Quello che voglio fare è avere tutti i colori come variabili, e i colori sono impostati nella parte: root del CSS.

Quello che voglio fare è cambiare quei colori tramite JavaScript. Ho cercato come farlo, ma nulla di ciò che ho provato ha funzionato correttamente. Ecco il mio codice corrente:

CSS:

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

JS:

(codice per impostare il tema, è riceve il clic di un pulsante) - Non mi preoccupai di aggiungere il: root cambiare per gli altri 2 temi dal momento che non funziona sul tema scuro

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"); 
    } 
} 

(il codice che è scappato quando l'html è caricato)

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')); 
    } 
} 

Mostra l'avviso, ma in realtà non cambia nulla. Qualcuno può indicarmi la giusta direzione?

Answer 1

Grazie @pvg per aver fornito il collegamento. Ho dovuto guardarlo per un po 'per capire cosa stava succedendo, ma alla fine l'ho capito.

La linea magica che cercavo era questa:

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

Questo fatto esattamente quello che volevo fare, vi ringrazio molto!