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