vue项目基于element ui定制主题的换肤功能_vue3+ts+elementuiplus实现系统换肤

实现效果：

根据选择的皮肤，自动切换对应的element ui主题

实现思路：

1.使用element ui自带的主题编辑器设置需要的配色方案并下载主题
2.通过gulp为主题的所有css文件扩展命名空间
3.切换选项动态为body添加class

具体实现

一、设置配色得到自定义主题

使用element ui自带的主题编辑器设置需要的配色方案并下载主题

官网：https://element.eleme.cn/#/zh-CN/theme

设置好之后下载，解压后得到theme文件夹（包含字体文件及样式文件index.css）

官网的另一种方式

我用这种方式的时候执行et报错primordials is not defined
百度了一下大部分方法是回退node版本，当时我不想回退，后来发现了另一个解决办法，在这里记录下：

npm i element-themex -g 解决element ui 自定义主题失败（primordials is not defined）问题
1

二、通过gulp为主题的所有css文件扩展命名空间

2.1安装gulp

1.安装gulp：//这一步最好在cmd下全局安装，我一开始在项目下执行了到用的时候提示未安装
npm install gulp
2.安装gulp-clean-css
npm install gulp-clean-css
3.安装gulp-css-wrap
npm install gulp-css-wrap
1
2
3
4
5
6

在项目根目录创建gulpfile.js

// gulpfile.js
var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')
gulp.task('css-wrap', function () {
    return gulp.src(path.resolve('./theme/index.css'))
    /* 找需要添加类名的css文件，支持正则表达式 */
        .pipe(cssWrap({
            selector: '.blue' /* 添加的类名 */
        }))
        .pipe(cleanCSS())
        .pipe(gulp.dest('src/assets/css/theme/blue')) /* 存放的目录 */
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.2为主题的所有css文件扩展命名空间

把第一步解压好的theme文件放到项目根目录（不是根目录也行，只需要保证gulpfile.js中路径写对就行）
gulpfile.js中可以设置文件路径及存储路径
执行gulp css-wrap

执行成功后就能在你设置的存储路径那找到对应的css文件了，把解压后的theme文件夹中的字体文件夹也放过去就完成啦

三、切换选项动态为body添加class

3.1在main.js中引入需切换的样式文件

import './assets/css/theme/blue/index.css' import './assets/css/theme/green/index.css'

3.2切换事件

引入change-theme.js，切换时调用Themefuc 方法

change-theme.js

export const Themefuc = (themeName) => {
    window.sessionStorage.setItem('theme',themeName) //储存当前主题名
    document.body.className = themeName;//动态为body添加class
}
1
2
3
4

3.3刷新默认加载选择的主题

main.js中

// 页面刷新时，重新赋值
let theme = window.sessionStorage.getItem('theme');
store.dispatch('app/setTheme', theme?theme:'blue')//首次加载默认blue主题
1
2
3

app.js中

const actions = {
    // 更改主题
    setTheme({ commit }, theme) {
        commit('SET_THEME', theme);
        console.log('theme' + theme);
        Themefuc(document.body, theme);
        sessionStorage.setItem('theme', theme);
    }
};
export default {
    actions
};
1
2
3
4
5
6
7
8
9
10
11
12

ps.
这种方式是将用到的几种样式都提前加载，不太适合需切换的样式太多的情况