Vue+ElementUI实现多套主题换肤_elementui自定义切换多个主题

一、原理

本地存放多套主题，两者有不同的命名空间，如写两套主题，一套叫day theme ，一套叫night theme，night theme主题都在一个.night-theme的命名空间下，我们动态的在body上add .night-theme ， remove .night-theme。

二、实现

1、安装工具

npm i element-theme -g
1

下载官方通过的 Theme generator ，一个专门用来生成Element主题的工具。按照文档，我们生成了需要的主题。

2、安装白垩主题

# 从 npm
npm i element-theme-chalk -D

# 从 GitHub
npm i https://github.com/ElementUI/theme-chalk -D
1
2
3
4
5

3、初始化变量文件

主题生成工具安装成功后，如果全局安装可以在命令行里通过 et调用工具，如果安装在当前目录下，需要通过 node_modules/.bin/et访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss，当然你可以传参数指定文件输出目录。

et -i [可以自定义变量文件]
1

4、修改变量

直接编辑 element-variables.scss 文件，例如修改主题色为红色。

$--color-primary: red;
1

5、编译主题

保存文件后，到命令行里执行 et 编译主题，如果你想启用 watch 模式，实时编译主题，增加 -w 参数；如果你在初始化时指定了自定义变量文件，则需要增加 -c 参数，并带上你的变量文件名。默认情况下编译的主题目录是放在 ./theme 下，你可以通过 -o 参数指定打包目录。

e