Como alterar CSS: variáveis de cor da raiz em JavaScript

o que eu quero fazer é mudar essas cores através de JavaScript. Eu pesquisei como fazê-lo, mas nada que eu tentei realmente funcionou corretamente. Aqui está o meu código actual:

CSS:

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

JS:

(código para definir o tema, é executado no clique de um button) - eu não me dei ao trabalho de adicionar a: mudança de raiz para os outros 2 Temas, uma vez que não funciona no tema escuro

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

(código que é executado quando o html é carregado)

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