如何更改 CSS：JavaScript 中的根颜色变量

Question

好的，我正在为我的网页创建一个允许用户更改主题的系统。我想通过将所有颜色作为变量来实现这一点，并将颜色设置在 CSS 的 :root 部分。

我想要做的是通过 JavaScript 更改这些颜色。我查找了如何执行此操作，但我尝试的任何操作实际上都无法正常工作。这是我当前的代码：

CSS：

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

记者：

（设置主题的代码，单击按钮即可运行）-我没有费心将 :root 更改添加到其他 2 个主题，因为它不适用于 Dark 主题

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

它显示警报，但实际上并没有改变任何东西。有人能指出我正确的方向吗？

原文由 Daedalus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

感谢@pvg 提供链接。我不得不盯着它看了一会儿才明白发生了什么，但我终于明白了。

我一直在寻找的神奇路线是这样的：

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

这正是我想要它做的，非常感谢！

原文由 Daedalus 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于那些想要修改实际样式表的人来说，以下工作：

 var sheet = document.styleSheets[0];
sheet.insertRule(":root{--blue:#4444FF}");

更多信息在这里： https ://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule

原文由 Michael 发布，翻译遵循 CC BY-SA 4.0 许可协议