我可以在CSS变量中添加类名吗？

是否可以在CSS变量中添加类名，或者是否可以通过其他方法进行设置，这样我就不必直接通过javascript操作每个变量了？我想将所有样式保留在CSS中，并仅使用JS打开相关的类。例如，如果在CSS中可能出现类似情况：

:root.white{ --bgcol:#FFF; --col:#000; }
:root.black{ --bgcol:#000; --col:#FFF; }

然后，我可以直接从javascript 切换.blackor或.whiteclass来触发所有var进行更改。这种设置的最佳方法是什么？

坦率地说，这是最好的方法（在大多数情况下都是惯用的）–使用类名（如果不是完全分开的样式表（这已经有很多年的传统了）），可以通过自定义属性对整个布局进行主题化。这是最“基本的CSS”方法，JavaScript只是使主题切换起作用的粘合剂。您确实不能做得更好。

对于那些不知道是什么:root意思并想知道确切在哪里应用类名的人，它是html元素（的父元素body）。因此，这里没有什么特别的事情-您只需在html元素上切换类名。碰巧的是，按惯例为文档根元素定义了全局自定义属性，因为它位于继承链的顶层。

如果您有任何与主题无关的自定义属性，以及应用于根元素的样式属性（即非自定义属性），请使其:root与主题自定义属性保持独立的无限定规则，这样它们就不会受到影响通过主题切换。这是一个例子：

const root = document.documentElement;

// Default theme - should assign declaratively in markup, not JS
// For a classless default theme, move its custom properties to unqualified :root
// Again, keep it separate from the other :root rule that contains non-theme props
// Remember, the cascade is your friend, not the enemy
root.classList.add('white');

document.querySelector('button').addEventListener('click', function() {
  root.classList.toggle('white');
  root.classList.toggle('black');
});

:root {
  --spacing: 1rem;
  color: var(--col);
  background-color: var(--bgcol);
}

:root.white {
  --bgcol: #FFF;
  --col: #000;
}

:root.black {
  --bgcol: #000;
  --col: #FFF;
}

p {
  margin: var(--spacing);
  border: thin dashed;
  padding: var(--spacing);
}

Switch themes
Hello world!