关于使用less实现系统明暗色换肤

目的作为个人笔记使用，真有人用我代码参考的话辛苦您了，赶时间写的有点潦草。

老规矩安装依赖步骤全部跳过（npm install XXX）

项目中需要创建一个文件夹，我命名为theme，在文件夹下创建文件theme.less

代码有点多，懒得删了，核心就是less的变量语法运用，js学的好的同学看一遍就能明白咋回事

// 亮色start
@light-bg-color: #fff;
@light-text-color: #2c254a;
@light-container-color: #fbfbfb;
@light-btn-color: #5A45AA;
@light-table-btm-color: #EBEEF5;
// @light-table-head-text: #000;
// 亮色end

// 暗色start
@dark-bg-color: #2c254a;
@dark-text-color: #fff;
@dark-container-color: #3c3266;
@dark-btn-color: #5A45AA;
@dark-table-btm-color: #383367;
// @dark-table-head-text: #000;
// 暗色end

body {
    margin: 0;
    padding: 0;

    &.theme-light {
        .generate-theme(@light-bg-color, @light-text-color, @light-container-color, @light-btn-color, @light-table-btm-color);
    }

    &.theme-dark {
        .generate-theme(@dark-bg-color, @dark-text-color, @dark-container-color, @dark-btn-color, @dark-table-btm-color);
    }
}

// less混合生成主题样式
.generate-theme(@bg-color, @text-color, @container-color, @btn-color, @table-btm-color) {
    #app {
        background-color: @bg-color;
    }

    .search,
    .top-container,
    .content,
    .el-aside,
    .el-menu,
    .el-dropdown,
    .el-form-item__label,
    .el-menu-item,
    .el-drawer,
    .el-pagination__total,
    .el-pagination__jump,
    .name-box,
    .el-radio,
    .el-drawer__header {
        background-color: @bg-color;
        color: @text-color;
    }

    .camera-content {
        .item-box {
            background-color: @bg-color;
            color: @text-color;
        }
    }

    .box-card,
    .camera-content,
    .el-container {
        background-color: @container-color;
    }

    .el-button,
    .el-button.is-plain:active,
    .el-button.is-plain:focus {
        color: #fff;
        background: #8A80EA;
        border-color: #8A80EA;
    }
}

然后就是在index页面加载时，读取一下本地储存时的flag，我储存的是‘dark’和‘light’，你们随意

import '@/theme/theme.less'

mounted() {
    // 处理当前主题色
    let colorNow = sessionStorage.getItem('theme');
    this.getColor(colorNow === 'light' ? 'dark' : 'light')
},
methods: {
    getColor(ret) {
        // console.log("color", ret)
        document.body.className = `theme-${ret}`;
    },
},

然后就是触发变色的函数，也就是用户点击某个按钮，整体系统会换一套颜色（我的是在header组件里）

// 切换主题
// 我这里emit()传出去的事件，对应的就是index页面（上一个代码块）中的getColor（）。
changeTheme() {
    let themeNow = sessionStorage.getItem('theme')
    if (themeNow === 'light') {
        this.$emit('changeTheme', 'light')
        sessionStorage.setItem('theme', 'dark')
    } else {
        this.$emit('changeTheme', "dark")
        sessionStorage.setItem('theme', 'light')
    }
},

到这里就结束了，你也应该能实现点击按钮切换明暗色两种主题了。

over.