动态主题加载方案

方案1：link标签动态引入

其做法就是提前准备好几套CSS主题样式文件，在需要的时候，创建link标签动态加载到head标签中，或者是动态改变link标签的href属性。

优点：

1.实现了按需加载，提高了首屏加载时的性能

缺点：

1.动态加载样式文件，如果文件过大网络情况不佳的情况下可能会有加载延迟，导致样式切换不流畅2.如果主题样式表内定义不当，会有优先级问题3.各个主题样式是写死的，后续针对某一主题样式表修改或者新增主题也很麻烦

方案2：提前引入所有主题样式，做类名切换

这种方案与第一种比较类似，为了解决反复加载样式文件问题提前将样式全部引入，在需要切换主题的时候将指定的根元素类名更换，相当于直接做了样式覆盖，在该类名下的各个样式就统一地更换了。其基本方法如下：

/* day样式主题 */
body.day .box {
  color: #f90;
  background: #fff;
}
/* dark样式主题 */
body.dark .box {
  color: #eee;
  background: #333;
}


.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

优点：

1.不用重新加载样式文件，在样式切换时不会有卡顿

缺点：

1.首屏加载时会牺牲一些时间加载样式资源2.如果主题样式表内定义不当，也会有优先级问题3.各个主题样式是写死的，后续针对某一主题样式表修改或者新增主题也很麻烦

方案3：CSS变量+类名切换

依然是提前将样式文件载入，切换时将指定的根元素类名更换。不过这里相对灵活的是，默认在根作用域下定义好CSS变量，只需要在不同的主题下更改CSS变量对应的取值即可。

/* 定义根作用域下的变量 */
:root {
  --theme-color: #333;
  --theme-background: #eee;
}
/* 更改dark类名下变量的取值 */
.dark{
  --theme-color: #eee;
  --theme-background: #333;
}
/* 更改pink类名下变量的取值 */
.pink{
  --theme-color: #fff;
  --theme-background: pink;
}


.box {
  transition: all .2s;
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  /* 使用变量 */
  color: var(--theme-color);
  background: var(--theme-background);
}

优点：

1.不用重新加载样式文件，在样式切换时不会有卡顿2.在需要切换主题的地方利用var()绑定变量即可，不存在优先级问题3.新增或修改主题方便灵活，仅需新增或修改CSS变量即可，在var()绑定样式变量的地方就会自动更换

缺点：

1.IE兼容性（忽略不计）2.首屏加载时会牺牲一些时间加载样式资源