☰

JavaScript で CSS の :root color 変数を変更する方法 質問する

tag-icon • tag-icon javascript html css
JavaScript で CSS の :root color 変数を変更する方法 質問する

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

私がやりたいのは、JavaScript を使ってこれらの色を変更することです。やり方を調べましたが、実際に試したものはどれもうまくいきませんでした。現在のコードは次のとおりです。

CS: ...

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

警告は表示されますが、実際には何も変わりません。誰か正しい方向を示してもらえますか?

ベストアンサー1

リンクを提供してくれた @pvg に感謝します。何が起こっているのか理解するためにしばらく見つめなければなりませんでしたが、ようやく理解できました。

私が探していた魔法の行はこれです:

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

まさに私が望んでいた通りの結果になりました。本当にありがとうございます!

おすすめ記事