JavaScriptでCSS :root の色変数を変更する方法

質問

さて、私は、ユーザーがテーマを変更できるようにするウェブページのシステムを作成しています。どのようにこれを達成したいかというと、すべての色を変数として持ち、色は CSS の :root 部分に設定されます。

私がしたいことは、JavaScriptを介してこれらの色を変更することです。それを行う方法を調べましたが、私が試したものは何も実際に適切に動作しませんでした。以下は、私の現在のコードです。

CSSです。

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

JSです。

(テーマを設定するコード、ボタンをクリックすると実行されます） - ダークテーマでは動作しないので、他の2つのテーマにはわざわざ :root の変更を追加しませんでした。

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

（htmlが読み込まれた時に実行されるコード）

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

アラートは表示されますが、実際には何も変更されません。どなたか正しい方向を示していただけませんか？

どのように解決するのですか？

リンクを提供してくださった@pvgさん、ありがとうございました。何が起こっているのか理解するために少しじっと見ていましたが、やっとわかりました。

私が探していた魔法のセリフはこれでした。

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

まさに私がやりたかったことをやってくれました！ありがとうございます。