如何在JavaScript中更改CSS:根颜色变量

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

我想做的是通过JavaScript更改这些颜色。我查了一下怎么做，但我尝试过的方法实际上都不管用。以下是我当前的代码：

CSS:

JS:

（设置主题的代码，只需点击一个按钮即可运行）-我没有费心将：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时运行的代码）

---

它会显示警报，但实际上不会更改任何内容。有人能给我指出正确的方向吗？

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

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

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

---

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

古老的jquery魔力仍然在发挥作用

$('#yourStyleTagId').html(':root {' +
    '--your-var: #COLOR;' +
'}');

---

要在JavaScript中使用自定义属性的值，它与标准属性类似

// get variable from inline style
element.style.getPropertyValue("--my-variable");

// get variable from wherever
getComputedStyle(element).getPropertyValue("--my-variable");

// set variable on inline style
element.style.setProperty("--my-variable", 4);

---

对于那些想要修改实际样式表的人，以下方法很有效：

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

---

这里有更多信息：

我来这里是想看看如何用JavaScript切换

：root

，它将浏览器设置为暗模式（包括滚动条），如下所示：

：根目录{
配色方案：深色；
}

使用上面的@Daedalus答案，我是如何根据用户偏好实现暗模式检测的：

const userPrefersDarkMode=window.matchMedia（'（首选颜色方案：深色）'）。匹配；
const preferredTheme=userPrefersDarkMode？“黑暗“：“光明”；
document.documentElement.style.setProperty（“配色方案”，首选主题）；

或使用已保存的切换：

const savedTheme=localStorage.getItem（'theme'）；
if（savedTheme=='dark'）{
这个主题=‘光’
}
否则{
thisTheme='dark'；//从未保存时的默认值为dark
}
document.documentElement.style.setProperty（“配色方案”，thisTheme）；
setItem（'theme'，thisseme）；

另请参见标题中的可选选项：

文档准备就绪时，js是否正在运行？您如何确定它“不会改变任何东西”？抱歉，将您的示例更改为更接近于更新的OP，并添加更多代码。您希望更改的内容仍然不明显。例如，您可以在控制台上键入，比如，

$（':root'）.css（“背景色”，“#000000”）

，然后看到变化。因此，如果没有发生视觉变化，问题可能不是您的代码（除非它在文档准备就绪之前运行），我想用JS更改变量的颜色。例如，在我的示例中，我试图将--主颜色从#317EEB更改为#000000。打开控制台。运行设置颜色的语句。运行查询颜色的语句。具有讽刺意味的是，getPropertyValue似乎没有使用：根css变量，但设置会使用。获取值的方法是：

getComputedStyle（元素）。getPropertyValue（--my var”）

我喜欢使用

document.querySelector（“：root”）

而不是

document.documentElement

，因为我确信这与css

文档中的
：root{…}
是同一个元素。querySelector（':root'）==document.documentElement

返回

true

-然而，TypeScript抱怨前者；但我怀疑它有什么好的理由抱怨：/对所有以前的评论者来说：这个解决方案做到了它所说的，在

document.documentElement

aka

html

，它可以工作，尽管

html

的特殊性较低，只是因为javascript将样式设置为内联的！请参见

Dev Tools

，第一个示例不适用于

：root

css属性-它只适用于直接使用

setProperty

设置的值。需要使用

getComputedStyle（元素）。getPropertyValue（…）

// get variable from inline style
element.style.getPropertyValue("--my-variable");

// get variable from wherever
getComputedStyle(element).getPropertyValue("--my-variable");

// set variable on inline style
element.style.setProperty("--my-variable", 4);

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