element-ui 主题换色_elementui 暗黄色-优快云博客

本文介绍了一个使用Vue实现的主题颜色切换功能。通过Vuex状态管理工具来改变应用的主题颜色，并利用Element UI组件库进行演示。文章详细展示了如何创建切换不同主题颜色的逻辑，包括通过更改CSS类来动态调整界面样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
这里写图片描述

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">20a0ff</el-radio>
                <el-radio label="fa4f52">fa4f52</el-radio>
                <el-radio label="0000ff">0000ff</el-radio>
                <el-radio label="008000">00800</el-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>