Vue 基于 Element 动态切换主题

自己的项目想动态切换主题实现日间模式和夜间模式切换的功能😎

先搞两套主题

这里就白嫖element的自定义主题功能

1. 进入网站element
2. 选择自己想要的颜色，我在这搞了个黑绿主题
   
3. 搞完下载下来，解压了就是个这东西
   
   4.再把默认主题给下载下来备用

项目内操作

1. 首先安装一下element的主题依赖

npm i element-ui -S
npm i sass-loader node-sass -D
npm i element-theme -g
npm i element-theme-chalk -D

2. 初始化变量文件

et -i

3. 编辑主题

et

4. 安装gulp-css-wrap

// 1.安装gulp：
npm install  gulp
 
// 2.安装gulp-clean-css
npm install gulp-clean-css
 
// 3.安装gulp-css-wrap
npm install gulp-css-wrap

5. 替换文件

• 将第一步样式文件index.css替换theme文件夹下面的index.css
• 将第一步的fonts文件替换fonts文件夹下面的字体文件

6. 在根目录下新建一个gulpfile.js文件
   每次编译都需要更改代码内的命名空间字段，以免文件夹重复。

var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css');
var cssWrap = require('gulp-css-wrap');
// 设置不同的主题命名空间
var customThemeName='.custom-08E6B9' // 重新编译需要修改

gulp.task('css-wrap', function() {
  return gulp.src( path.resolve('./theme/index.css'))
    .pipe(cssWrap({selector:customThemeName}))/* 添加的命名空间 */
    .pipe(cleanCSS())
    .pipe(gulp.dest('./src/assets/gulptheme/08E6B9'));/* 存放08E6B9文件下目录，重新编译需要修改 */
});
// index.css需要fonts里面的依赖
gulp.task('move-font', function() {
  return gulp.src(['./theme/fonts/**']).pipe(gulp.dest('./src/assets/gulptheme/08E6B9/fonts')); // 重新编译需要修改
});

7. 编译样式文件

gulp css-wrap

将会在src/assets下面自动生成文件，有几个样式文件就需要在第五步替换样式文件开始重新编译，这样将会生成多个文件夹。

8. 全局引入
   在main.js中引入编译的样式文件

import "@/assets/gulptheme/FEB84A/index.css"; // 换肤版本 FEB84A css
import "@/assets/gulptheme/08E6B9/index.css"; // 换肤版本 08E6B9 css

9. 在项目内使用，根据不同情况选择使用的主题

  themeChange (val) {
    if (val === 'vs'){
      this.changeClass(document.body, "custom-FEB84A");
    } else {
      this.changeClass(document.body, "custom-08E6B9");
    }
  },
  changeClass(element, className) {
    if (!element || !className) return;
    element.className = className;
  },

注意事项

gulp支持的node版本较低，我用的v10.19.0

参考

简cere