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

【问题标题】：How to change CSS :root color variables in JavaScript如何更改 CSS：JavaScript 中的根颜色变量
【发布时间】：2016-10-14 14:06:46
【问题描述】：

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

我想做的是通过 JavaScript 更改这些颜色。我查找了如何做到这一点，但我尝试过的任何事情都没有真正正常工作。这是我当前的代码：

CSS：

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

JS：

（设置主题的代码，单击按钮即可运行）- 我没有费心将 :root 更改添加到其他 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 时运行的代码）

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

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

【问题讨论】：

文档准备好后你的js是否在运行？你如何确定它“没有改变任何东西”？将您的示例更改为更接近minimal reproducible example
用更多代码更新了 OP，抱歉。
您期望更改的内容仍然不明显。例如，在您的控制台上，您可以输入 $(':root').css("background-color", "#000000") 并查看事情的变化。因此，如果没有发生视觉变化，问题可能不是您的代码（除非它在文档准备好之前运行）
我想用JS改变变量的颜色。例如，在我的示例中，我试图将 --main-color 从 #317EEB 更改为 #000000。
打开控制台。运行设置颜色的语句。运行查询颜色的语句。看看你是否得到你设置的东西。

标签： javascript html css

【解决方案1】：

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

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

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

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

【讨论】：

具有讽刺意味的是，getPropertyValue 似乎没有使用 :root css 变量，但设置可以
取值方式为：getComputedStyle(element).getPropertyValue("--my-var");
我喜欢使用 document.querySelector(":root") 而不是 document.documentElement，因为我确信这与 css 中的 :root { ... } 相同
document.querySelector(':root') === document.documentElement 返回true - 但是，TypeScript 抱怨前者；我怀疑它是否有充分的理由抱怨：/
我们可以通过javascript给transition speed吗？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

在 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);

【讨论】：

第一个示例不适用于:root css 属性 - 它仅适用于直接使用setProperty 设置的值。需要使用getComputedStyle(element).getPropertyValue(......)

【解决方案4】：

我来这里是为了寻找如何使用 JavaScript 切换 :root color-scheme，它将浏览器设置为暗模式（包括滚动条），如下所示：

:root {
    color-scheme: dark;
}

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

    const userPrefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const preferredTheme = userPrefersDarkMode ? 'dark' : 'light';
    document.documentElement.style.setProperty("color-scheme", preferredTheme);

或保存切换：

    const savedTheme = localStorage.getItem('theme');
    if (savedTheme == 'dark') {
        thisTheme = 'light'
    }
    else {
        thisTheme = 'dark'; // the default when never saved is dark
    }
    document.documentElement.style.setProperty("color-scheme", thisTheme);
    localStorage.setItem('theme', thisTheme);

另请参阅标题中的可选meta tag：

<meta name="color-scheme" content="dark light">

【讨论】：

【解决方案5】：

旧的 jquery 魔法仍然有效

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

【讨论】：