如何一次性批量更新多个CSS自定义属性？

其实你已经把事儿做对一半啦！你在CSS里已经完整定义了dark（默认）和light主题的所有变量，根本不需要在JS里手动挨个设置每个自定义属性——只需要给<html>元素切换light类名，所有主题变量会自动从CSS里生效，这才是最优雅的方案！

为什么不用挨个改变量？ #

你看，你已经写了html.light的变量覆盖规则：当<html>标签上有light类时，浏览器会自动用这个选择器下的变量值替换默认的:root变量；移除类名就回到默认的dark主题。所有样式逻辑都集中在CSS里，JS只需要负责触发类名切换就行，完美分离职责，也不用重复维护变量值。

改进后的JS代码 #

把你原来的setTheme函数改成这样就行，超级简洁：

function setTheme(theme) {
  const htmlElement = document.documentElement;
  if (theme === "dark") {
    htmlElement.classList.remove("light");
  } else {
    htmlElement.classList.add("light");
  }
}

把额外变量也整合进主题 #

如果你想把--table-sticky-heading-bg-color也一起批量处理，直接把它加到CSS的主题定义里就好，不用再在JS里单独设置：

在:root的变量集合里加上：

:root {
  /* 你的原有变量... */
  --table-sticky-heading-bg-color: rgba(0,0,0,1);
}

然后在html.light的定义里加上对应的变量值：

html.light {
  /* 你的原有变量... */
  --table-sticky-heading-bg-color: rgba(255,255,255,1);
}

这样之后，切换主题时这个变量也会自动跟着变化，JS里完全不用额外处理它。

这种方式不仅代码更简洁，而且所有主题相关的样式都集中在CSS里维护，以后要加新的主题变量，直接在CSS里补充就行，不用动JS，维护起来方便太多啦！

备注：内容来源于stack exchange，提问作者Murphstar