css - 从 Javascript 更新 CSS 模块变量

Question

我正在使用 CSS 模块附带的(现在更旧的)react-boilerplate 版本。它们的优点在于您可以创建变量并将它们导入其他 CSS 文件。

这是我的 colors.css 文件

:root {
  /* Status colors */
  --error: #842A2B;
  --success: #657C59;
  --pending: #666;
  --warning: #7E6939;
}

当我导入该文件时，我只需在 .css 文件的顶部使用:

@import 'components/App/colors.css';

我希望为我的网站选择两个主题，我希望能够使用 Javascript 动态更新这些变量。最好的方法是什么？

编辑:我希望有一种方法可以更新 colors.css 文件，而不必在从两个可能的 css 文件中绘制的所有组件中进行条件导入...让我知道是否有一种方法可以做到这一点，如果有的话，我会更改已接受的答案。感谢所有回答的人!

Answer 1

我只会在 element/body/whatever 上使用默认颜色变量，然后将备用主题颜色放在另一个类中，并通过 JS 切换主题类。这是一个演示。

$("button").on("click", function() {
  $("body").toggleClass("foo");
});

body {
  --red: red;
  --blue: blue;
  --yellow: yellow;
  background: #ccc;
  text-align: center;
  font-size: 5em;
}

.foo {
  --red: #ce1126;
  --blue: #68bfe5;
  --yellow: #ffd100;
}

.red {
  color: var(--red);
}

.blue {
  color: var(--blue);
}

.yellow {
  color: var(--yellow);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="red">RED</span> <span class="blue">BLUE</span> <span class="yellow">YELLOW</span>
<br>
<button>click me</button>