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

IT技术 javascript html css
2021-02-20 05:41:35

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

我想做的是通过 JavaScript 更改这些颜色。我查了查怎么做，但我尝试的任何东西都没有真正正常工作。这是我当前的代码：

CSS：

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

JS：

（设置主题的代码，单击按钮即可运行） - 我没有费心将 :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'));
  }
}

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

5个回答

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

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

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

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

获取值的方法是： getComputedStyle(element).getPropertyValue("--my-var");
2021-04-18 05:41:35
document.querySelector(':root') === document.documentElement返回true- 然而，TypeScript 抱怨前一个；我怀疑它是否有充分的理由抱怨：/
2021-04-18 05:41:35
我喜欢使用document.querySelector(":root")而不是document.documentElement，因为我确信这与:root { ... }css 中的元素相同
2021-04-20 05:41:35
对于所有以前的评论者：这个解决方案做它所说的，在document.documentElementaka 中设置一个 var，html尽管它html具有较低的特异性，因为 javascript 设置了内联样式！查看Dev Tools和MDN 文档
2021-05-02 05:41:35
具有讽刺意味的是，看起来 getPropertyValue 没有使用 :root css 变量，但设置确实如此
2021-05-10 05:41:35

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

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

更多信息请访问：https : //developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/addRule

在 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);
第一个示例不适用于:rootcss 属性 - 它仅适用于直接使用 .css 设置的值setProperty。需要使用getComputedStyle(element).getPropertyValue(......)
2021-05-02 05:41:35

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

: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 name="color-scheme" content="dark light">

旧的 jquery 魔术仍然有效

$('#yourStyleTagId').html(':root {' +
    '--your-var: #COLOR;' +
'}');
其它你可能感兴趣的问题
上一篇为什么 instanceof 对 babel-node 下的 Error 子类的实例不起作用？ 下一篇在 JavaScript 中序列化/反序列化对象的最佳方法？