切换主题功能初尝试

近期的项目有一个切换主题的需求，其实这个功能我很早就想研究一下了，只是没有项目驱动一直懒得动，这次就借工作当中的项目趟了一遍河。切换主题主要分为三个方面：1.element等UI库的主题切换。2.echarts的主题切换。3.自己写的样式实现主题切换。下面就一一说明实现过程。

element主题切换

1. 统一处理

前往在线主题生成工具编辑好主题然后导出。然后使用gulp完成类名前缀批量添加，通过切换body上的对应的class名来实现主题切换。

gulp的使用
a>安装3个插件 npm i gulp gulp-clean-css gulp-css-wrap -D
b>在项目根目录中新建一个gulpfile.js文件
c>解压element主题压缩文件至特定位置并执行gulp
我项目中的gulp配置文件

const path = require('path');
const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
const cssWrap = require('gulp-css-wrap');

// 新增的主题需要修改此处的样式名，并与项目中切换主题操作的地方对应
const customThemeName = '.theme-green';

gulp.task('default', function() {
  // 源文件路径  直接将style.zip解压到此文件夹即可
  return gulp.src( path.resolve('./xxxxx'))
    .pipe(cssWrap({ selector: customThemeName }))
    .pipe(cleanCSS())
    // 目标文件路径 注意将生成的index.css修改为项目中使用的名字
    .pipe(gulp.dest('./xxxx'));
});

执行完gulp命令之后可以发现主题css中已经添加了设置好的类名，剩下的就是切换主题时对body标签进行dom操作切换class了

修改好的element主题css文件

执行gulp命令提示禁止运行脚本解决办法(win平台)

1> 使用管理员身份运行 PowerShell
2> 输入 set-executionpolicy remotesigned 输入 y 确认

2. 特殊样式处理

由于element主题工具的局限性，有些element的样式我们需要单独写文件处理（比如渐变色）这部分的内容和一般项目中覆盖默认样式的处理没有太大的区别。

注意body类名要对应

echarts主题切换

1. 前往 官方主题编辑器 编辑完成之后下载主题-选js然后将文件放入项目中 注意修改主题名称(由于我使用的是vue-echarts所以主题js文件引入后可以直接使用，使用echarts可以自行参考官网上的使用方法)
2. 点击“导出配置”将导出的json文件放入项目中 (修改主题时上传用)

echarts主题的缺陷和element差不多——不支持渐变色，因此我为了省事直接在下载好的js文件中修改了color的值，这也导致后续要修改主题有点麻烦，不过我想echarts的主题也不会怎么改了，另一方面我也在项目中写好了说明文档。

普通样式的主题切换

其实这一部分可以和element的第二部分一样写在一个统一的类名下通过切换body的class来实现，不过当时我在实现这一块的时候脑海中一直在提醒我曾经看过的一篇张鑫旭老师的文章，于是我采取了他的方法——通过切换link标签——来实现这一部分的效果，现在回想这个项目会显得有点乱了。实现步骤他的文章里都有说，这里就不赘述了，值得注意的是我们在vue项目中因为修改的是public中的文件，所以不能写相对路径 仿照ico图标的写法即可href="<%= BASE_URL %>static/css/default.css"

后记

根据设计稿做项目时发现了一个悲催的事情，element的主题颜色不支持不透明度，而echarts的主题支持不透明度但是不支持渐变......最终element的主题就用了个主题色，其它的颜色基本都在公共样式中修改了，echarts还好，由于它本身的color属性支持渐变，所以可以直接修改从网站导出的文件里面的color属性。

参考内容

1. gulp 批量添加类名 在一个任务中使用多个文件来源
2. link rel=alternate网站换肤功能最佳实现