So ändern Sie die CSS :Farbe der Rübe Variablen in JavaScript

Okay, ich bin momentan dabei, ein system für meine Webseite, die es Nutzern erlaubt, das theme zu verändern. Wie will ich dies erreichen indem alle die Farben als Variablen, und die Farben sind festgelegt in der :root-Teil des CSS.

Was ich will zu tun ist, ändern Sie die Farben von via JavaScript. Ich sah, wie es zu tun, aber nichts, was ich versuchte tatsächlich funktioniert. Hier ist meine aktuelle code:

CSS:

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

JS:

(Code, um das Thema gesetzt, es lief auf das klicken auf eine Schaltfläche) - ich wollte nicht stören hinzufügen :root ändern, um die anderen 2 Themen, da es nicht funktioniert auf das Dunkle Thema

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, der lief, wenn der html-Code wird geladen)

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

Es zeigt die Warnung, aber nicht wirklich etwas ändern. Kann mir jemand zeigen in die richtige Richtung?