Question

好吧，我正在为我的网页创建一个允许用户更改主题的系统。我想要实现的目的是将所有颜色作为变量，并在CSS的根部分设置颜色。

我想要做的是通过JavaScript更改这些颜色。我抬头看看怎么做，但我尝试过的任何事情都没有。这是我目前的代码：

CSS：

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

JS：

（用于设置主题的代码，单击按钮即可运行） - 我没有打扰：将根更改添加到其他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'));
  }
}

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

Answer 1

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

我一直在寻找的神奇之处是：

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

这完全是我想要它做的，非常感谢你！

Answer 2

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

Answer 3

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

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

更多信息，请点击此处：https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/addRule

Answer 4

旧的jquery魔术仍然有效

import matplotlib.pyplot as plt

days = df.days[df.name == 'John']
plt.stackplot(days, df.change[df.name == 'John'],
              df.change[df.name == 'Jane'])

Answer 5

我来这里是想看看如何使用 JavaScript 切换 select distinct Name,Date from MyTable where (Name,Date) in (select Name,max(Date) from MyTable group by Name) color-scheme，它会将浏览器设置为暗模式（包括滚动条），如下所示：

:root

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

:root {
    color-scheme: dark;
}

或保存切换：

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

另见标题中的可选 meta tag：

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

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

5 个答案: