CSSを変更するにはJavaScriptのルートカラー変数

Question

申し訳ありませんが、私はユーザーがテーマを変更できるようにする私のウェブページ用のシステムを作成しています。私がこれを達成したいのは、すべての色を変数にすることで、色はCSSの：root部分に設定されます。

私がやりたいことは、JavaScriptを使用してそれらの色を変更することです。私はそれを行う方法を見上げたが、私が実際に試みたものは、実際に正しく働いた。ルート： -

CSS：：：

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

JS私は追加する気にしませんでした

（コードがテーマを設定し、それは、ボタンのクリックで走っています）ここに私の現在のコードですそれは暗いテーマでは動作しませんので、他の2つのテーマに変更

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がロードされているRANがあるコード）

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

アラートは表示されますが、実際には何も変更されません。誰かが私を正しい方向に向けることができますか？

Answer 1

ありがとうございます@pvgリンクを提供してください。何が起こっているのか理解するために少しはそれを目で見なければなりませんでしたが、ついにそれを理解しました。

私が探していた魔法の行はこのだった：私はそれをやってみたかったまさになかったこと

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

、どうもありがとうございました！