JavaScript での CSS :root カラー変数の変更

Web 開発の領域では、Web ページの見た目の美しさをカスタマイズすることは、多くの場合、 CSS変数の使用。これらの変数は CSS の :root セクション内で定義されており、開発者は設計のさまざまな側面を制御できます。一般的なシナリオの 1 つは、JavaScript を使用してこれらの色を動的に変更できることです。

これを実現するには、重要なコード部分は次のとおりです。

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

この行は基本的に、:root セクションで指定された CSS 変数を変更し、その値を目的の値に更新します。 色。たとえば、 --main-color 変数を黒に変更する場合は、次のコードを使用します:

document.documentElement.style.setProperty('--main-color', '#000000');

このコードを質問で提供されている例に適用します:

function setTheme(theme) {
  if (theme == 'Dark') {
    localStorage.setItem('panelTheme', theme);
    $('#current-theme').text(theme);
    document.documentElement.style.setProperty('--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");
  }
}

この更新されたコードは --main-color 変数を正常に変更し、ボタンがクリックされたときに Web ページ上の色を動的に変更します。