element-ui 主题换色

效果图：

1.主题文件文件

2.准备引入的文件
utils下的index.js -> 替换class

export function toggleClass(element, className) {
    if (!element || !className) {
      return
    }
    element.className = className;
}

store下的index.js ->

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        themecolor:'20a0ff'//默认为20a0ff
    },
    mutations:{
        //更新主题颜色
        setThemeColor(state,curcolor){
            this.state.themecolor = curcolor;
        }
    }
});
export default store;

3.引入
app.js

import '../theme/index.css'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import store from './store/index'

Vue.use(ElementUI)

const mountList = {
    app:'/index',
}

import app from './pages/app.vue'

const {
    location: {
        pathname
    }
} = window

if(pathname === mountList.app){
    console.log('首页')
    const appPage = new Vue({
        el:'#app',
        store,
        render:h => h(app)
    })
}

app.vue

<template>
        <div class="">
            <el-radio-group v-model="themecolor">
                <el-radio label="20a0ff">20a0ffel-radio>
                <el-radio label="fa4f52">fa4f52el-radio>
                <el-radio label="0000ff">0000ffel-radio>
                <el-radio label="008000">00800el-radio>
            el-radio-group>
            <div class="">
                <span class="wrapper">
                    <el-button type="primary">主要按钮el-button>
                    <el-button type="success">成功按钮el-button>
                    <el-button type="warning">警告按钮el-button>
                    <el-button type="danger">危险按钮el-button>
                    <el-button type="info">信息按钮el-button>
                span>
            div>
        div>
template>

<script>
    import '../../../assets/css/theme/20a0ff/index.css'
    import '../../../assets/css/theme/fa4f52/index.css'
    import '../../../assets/css/theme/0000ff/index.css'
    import '../../../assets/css/theme/008000/index.css'

    import {toggleClass} from '../utils/index'

    export default {
        data() {
            return {}
        },
        mounted() {
            toggleClass(document.body, "custom-" + this.themecolor)
        },
        computed: {
            themecolor: {
                get() {
                    return this.$store.state.themecolor;
                },
                set(val) {
                    this.$store.commit('setThemeColor', val)
                }
            }
        },
        watch: {
            themecolor: {
                handler() {
                    toggleClass(document.body, "custom-" + this.themecolor)
                }
            }
        }
    }

script>

<style scoped>

style>

借鉴自：https://blog.csdn.net/young_Emily/article/details/78591261