前段时间我的项目中要求设置主题切换，因为之前没接触过，所以跟着官网流程走，记录下开发过程中所遇到的坑。

我的项目设计有暗黑模式和清亮模式，接下来进入流程：

1、装置主题生成工具

 npm i element-theme -g

2、装置白垩主题

npm i element-theme-chalk -D

3、初始化变量文件

et -i

执行完以上命令后，会在根目录下会生成element-variables.scss文件，里边蕴含了elementui中组件所用到的所有变量，像字体大小，色彩，背景色彩等。

如果我的项目有本人的设计稿，并且对字体色彩、按钮色彩等有严格要求，能够在这个文件找到对应属性进行批改，批改实现之后执行et编译主题

et

这时根目录下会生成theme文件夹，里边有fonts和一些css文件，这里的fonts文件会有用，其余css文件能够删除了。

接下来是重点，将element-variables.scss批改名称为element-variables-dark.scss,而后在执行第三步（初始化变量文件），这样根目录会从新生成一份element-varibles.scss文件，对里边的色彩、背景色彩更改保留，改名称为element-variables-light.scss，这里保留的是清亮模式的文件。

4、应用gulp-css-wrap神器

npm install gulpnpm install gulp-clean-cssnpm install gulp-css-wrap

5、在根目录下创立gulpfile.js文件

截图中.custom-light选择器是定义了清亮模式下在body中增加的类属性，
src/assets/theme/light 这块是寄存清亮模式的主题文件。文件夹中蕴含fonts和index.css，这里的fonts就是之前根目录theme下的fonts，是复制过去的，index.css文件则是真正的主题引入的文件。

最重要的一点，不论对暗黑模式还是清亮模式进行批改，首先批改根目录下两种模式对应的element-variables-light.scss文件，批改为element-variables.scss，零碎才会辨认进去，而后在执行et -i,批改完之后在执行et 编译主题。

6、执行gulp输入

gulp css-wrap

7、在main.js中引入

8、遇到的坑

因为装置gulp，gulp的版本和node不兼容,执行et -i 时报错：primordials is not defined；

解决方案：
gulp3.x.x须要将node升高到11.x.x
要么升高node版本为12以下，要么降级gulp为4.x版本。

这个报错终于解决了，又呈现了其余报错，没有发现chalk，我本人独自装了下，还是报错，最初发现还是版本的问题。

node v10.16.0版本 如下装置:

npm i element-theme -gnpm i element-theme-chalk -D

node v12.13.0 版本 如下装置:

npm i element-themex -gnpm i element-theme-chalk -D

版本不同，引入的element主题不一样，高版本用的是element-themex，这个在官网上没有找到，心愿能够帮到大家，其余的就是应用主题了，很简略，写一个el-switch开关对主题进行设置，利用vuex进行全局保留就能够了。