Vue 在sass中的主题切换方案

(一) 前言

主题切换，是目前很多产品需要定制的功能，常见的比如需要给用户提供两套主题，日间和夜间模式，那么我们需要找出一种在实际项目中使用的方案

(二) 切换方案

已知道的主题切换方案有如下几种

1. DWZ富客户端
   实现方式：

将不同主题的样式抽取出来。
生成多份不同的主题样式文件。
动态引入。

比如

//  theme1.css
.demo {
  color: red;
}

//  theme2.css
.demo {
  color: green;
}

//  theme3.css
.demo {
  color: blue;
}

然后将3个css作为不同的css文件上传到服务器，在用户点击切换时候，link不同的css文件样式，但是弊端也很明显，需要同时维护多份主题文件，而且随着主题的扩展，将会增大维护成本

2. 饿了么换肤功能

实现方式：

先把默认主题文件中涉及到颜色的 CSS 值替换成关键词：https://github.com/ElementUI/theme-preview/blob/master/src/app.vue#L250-L274

根据用户选择的主题色生成一系列对应的颜色值：https://github.com/ElementUI/theme-preview/blob/master/src/utils/formula.json

把关键词再换回刚刚生成的相应的颜色值：https://github.com/ElementUI/theme-preview/blob/master/src/utils/color.js

直接在页面上加 style 标签，把生成的样