CSS变量加elementui实现自定义系统主题颜色切换

我有一只小猫鸭

已于 2023-02-07 10:57:36 修改

阅读量854

点赞数

文章标签： scss less

于 2022-10-19 11:27:52 首次发布

本文链接：https://blog.csdn.net/m0_46196004/article/details/127404113

版权

1.在vue中安装vcolorpicker(npm插件用于选择颜色)

"vcolorpicker": "1.1.0", //yarn add vcolorpicker

2.在vue项目中新建一个mount.js文件

import Vue from "vue";
import vcolorpicker from 'vcolorpicker'


Vue.use(vcolorpicker)

// 存储默认主题颜色(用于存储系统默认两套完整颜色)
let loanTheme = JSON.parse(window.localStorage.getItem('loanTheme'))
let presetTheme = JSON.parse(window.localStorage.getItem('presetTheme'))
if (!presetTheme) presetTheme = 'orange' 
window.localStorage.setItem('presetTheme', JSON.stringify(presetTheme))
if (!loanTheme) {
    if (presetTheme === 'orange') { //橘色风格
        loanTheme = {
            bgColor: '#fff9f4',
            rightbgColor: '#ececec',
            tableTheadTh: '#ffe8d6',
            btnColor: '#ff6a00',
            iconFont: '#ff6a00',
            menuSelectLeft: '#ff4200',
            menuSelectRight: '#ff6f00',
            menuHover: '#ff6f00',
            menuBg: '#fff9f4',
            avatarBg: '#faf0e7',
            antCollapseHeader: '#ffb177',
            antDesItemLabel: '#fef6f3',
        }
    } else { //否则为蓝色风格
        loanTheme = {
            bgColor: '#fff',
            rightbgColor: '#f2f7ff',
            tableTheadTh: '#eff3f7',
            btnColor: '#435ac4',
            iconFont: '#435ac4',
            menuSelectLeft: '#435ac4',
            menuSelectRight: '#435ac4',
            menuHover: '#435ac4',
            menuBg: '#fff',
            avatarBg: '#c6d9f0',
            antCollapseHeader: '#fafafa',
            antDesItemLabel: '#f1f3f8',
        }
    }

    window.localStorage.setItem('loanTheme', JSON.stringify(loanTheme))
}
for (let key in loanTheme) {
	//在body的style属性上设置css变量属性
    document.getElementsByTagName('body')[0].style.setProperty(`--${key}`, loanTheme[key]);
}

3.新建一个themeSetting.scss文件(其他也可以些许不同用到的是预处理语言的变量写法不同)

// 模块背景色 用变量去赋值于类样式选择器
$bgColor: var(--bgColor, #fff9f4);
$rightbgColor: var(--rightbgColor, #ececec);
$btnColor: var(--btnColor, #ff6a00);
$tableTheadTh: var(--tableTheadTh, #ffe8d6);
// 列表选中
$iconFont: var(--iconFont, #ff6a00);
// 菜单
$menuSelectLeft: var(--menuSelectLeft, #ff4200);
$menuSelectRight: var(--menuSelectRight, #ff6f00);
$menuHover: var(--menuHover, #ff6f00);
$menuBg: var(--menuBg, #fff9f4);
// 主页
$avatarBg: var(--avatarBg, #faf0e7);
// 表单
$antCollapseHeader: var(--antCollapseHeader, #ffb177);
$antDesItemLabel: var(--antDesItemLabel, #fef6f3);

.content-list,
.bottom-money,
.bottom-person {
    background: $bgColor;
}

.index-icon {
    color: $iconFont;
}

// home页面组件的颜色修改
.home-aside {
    background-color: $menuBg;
}

// 设置菜单背景颜色
.el-menu {
    background-color: $menuBg !important;
}

// antd通用样式
.el-menu-item:hover,
.el-submenu__title:hover {
    color: $menuHover;
    background-color: transparent !important;

    i {
        color: $menuHover !important;
    }

    >.el-submenu__icon-arrow,
    .el-icon-arrow-down {
        color: $menuHover;
    }
}

// 通用类颜色

.cff6 {
    color: $iconFont;
}

.cbase {
    color: $iconFont !important;
}

a:not(.ant-calendar-year-panel-year):hover {
    color: $iconFont !important;
}

a:not(.ant-calendar-year-panel-year) {
    color: $iconFont !important;
}

4.在main.js中进行挂载(其他框架也可以只要挂载到全局就行)

//main.js
import '@/assets/scss/themeSetting.scss'
import "@/utils/mount";

5.新建themeSetting.vue页面(来做颜色选择)

<template>
    <div class="theme-box">
        <div>
            <div class="left-title ft18">主题颜色</div>
            <div class="flex mt20 mb30">
                <div class="theme-box" v-for="item in themeColor" :key="item" :class="item" @click="switchTheme(item)">
                    <div class="select-circle" v-if="presetTheme === item">
                        <img class="select-check" src="../../assets/img/check.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="theme-setting">
            <div class="customer-color">
                <div class="left-title">自定义配色</div>
                <!-- 自定义配色 -->
                <div class="fcolumn">
                    <div class="color-item">
                        <span>背景颜色</span>
                        <colorPicker class="picker" v-model="loanTheme.bgColor" />
                    </div>
                    <div class="color-item">
                        <span>右侧底色</span>
                        <colorPicker class="picker" v-model="loanTheme.rightbgColor" />
                    </div>

                    <div class="color-item">
                        <span>表格颜色</span>
                        <colorPicker class="picker" v-model="loanTheme.tableTheadTh" />
                    </div>
                    <div class="color-item">
                        <span>图标字体</span>
                        <colorPicker class="picker" v-model="loanTheme.iconFont" />
                    </div>
                    <div class="color-item">
                        <span>按钮颜色</span>
                        <colorPicker class="picker" v-model="loanTheme.btnColor" />
                    </div>
                    <div class="color-item">
                        <span>头像框背景</span>
                        <colorPicker class="picker" v-model="loanTheme.avatarBg" />
                    </div>

                </div>
            </div>
            <div class="customer-color mt20">
                <div class="left-title">菜单设置</div>
                <!-- 自定义配色 -->
                <div class="fcolumn">
                    <div class="color-item">
                        <span>菜单选中左</span>
                        <colorPicker class="picker" v-model="loanTheme.menuSelectLeft" />
                    </div>
                    <div class="color-item">
                        <span>菜单选中右</span>
                        <colorPicker class="picker" v-model="loanTheme.menuSelectRight" />
                    </div>
                    <div class="color-item">
                        <span>悬浮激活</span>
                        <colorPicker class="picker" v-model="loanTheme.menuHover" />
                    </div>
                    <div class="color-item">
                        <span>菜单背景</span>
                        <colorPicker class="picker" v-model="loanTheme.menuBg" />
                    </div>
                </div>
            </div>

            <div class="customer-color mt20">
                <div class="left-title">表单设置</div>
                <!-- 自定义配色 -->
                <div class="fcolumn">
                    <div class="color-item">
                        <span>折叠栏头部</span>
                        <colorPicker class="picker" v-model="loanTheme.antCollapseHeader" />
                    </div>
                    <div class="color-item">
                        <span>表单标签</span>
                        <colorPicker class="picker" v-model="loanTheme.antDesItemLabel" />
                    </div>
                </div>
            </div>
        </div>

        <div class="change-btn">
            <el-button type="primary" plain @click="resetTheme"> 恢复默认 </el-button>
            <el-button type="primary" @click="changeStyle" class="ml20"> 确认换肤 </el-button>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            loanTheme: {},
            themeColor: ['orange', 'blue'],
            presetTheme: ''
        }

    },
    created() {
        this.loanTheme = JSON.parse(window.localStorage.getItem('loanTheme'))
        this.presetTheme = JSON.parse(window.localStorage.getItem('presetTheme'))
    },
    methods: {
        // 主题切换
        changeStyle() {
            for (let key in this.loanTheme) {
                document.getElementsByTagName('body')[0].style.setProperty(`--${key}`, this.loanTheme[key]);
            }
            window.localStorage.setItem('loanTheme', JSON.stringify(this.loanTheme))
        },
        switchTheme(item) {
            this.presetTheme = item
            window.localStorage.setItem('presetTheme', JSON.stringify(this.presetTheme))
            window.localStorage.removeItem('loanTheme')
            window.location.reload()
        },
        // 恢复到默认主题
        resetTheme() {
            window.localStorage.removeItem('loanTheme')
            window.location.reload()
        }
    }
}
</script>

<style lang="scss" scoped>
.theme-box {
    position: relative;
    .left-title {
        font-weight: 700;
        margin-bottom: 16px;
    }
    .theme-setting {
        .customer-color {
            width: 500px;
            .color-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 10px;
            }
        }
        .picker {
            /deep/.colorBtn {
                width: 40px;
                height: 25px;
                border-radius: 5px;
                border: 1px solid #ccc;
            }
        }
    }
    .theme-box {
        width: 40px;
        height: 40px;
        margin-right: 14px;
        border-radius: 5px;
        border: 1px solid #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        &:first-child {
            background-color: orange;
        }
        &:nth-child(2) {
            background-color: blue;
        }
    }
    .select-check {
        width: 30px;
    }
    .change-btn {
        margin-top: 20px;
        position: absolute;
        right: 0px;
        bottom: 0px;
    }
    .ant-btn {
        height: 40px;
        width: 80px;
        padding: 0;
    }
}
</style>