CSS变量主题切换

虽然工作已经有几年了，但是主题切换还没做过，最近工作上遇到了，正好把实现方案记录一下。

1、定义一个css 文件并且在入口文件引入

利用为元素 :root 刚开始不太理解：root是个什么，后来查了一下，我个人理解相当于一个作用域，:root下定义的变量，html下的元素都能用var（变量名） 的方式访问到

2、页面中使用

.TEST{ color:var(--变量名--) }

3、最关键的一步，实现主题切换,实际就是动态的增减类名

const switchThem = (them) => {
  console.log("switchThem()", them);
  const root = document.documentElement;
  if (them === "1") {
    root.classList.add("dark"); // 添加上文定义的dark类，触发CSS变量切换
  } else if (them === "0") {
    root.classList.remove("dark");
  }
};

到这里，主题切换的完成了。