Vue中实现换肤功能

1. 首先，在assets下css里创建了两个文件，一个theme.less，就是控制样式的函数，一个color.less，用来调用函数传值。

// theme.less文件
// 实现换肤的样式函数
/*
    1.主色调，整体项目的主要颜色。
    2.首页的背景颜色。
    3.字体颜色。主要是和主色调来配合使用。
    4.表格滑过的颜色。
    5.表格选中的颜色。
    6/7.首页每一项渐变的颜色，待定。
*/
//将项目中所有需要更改样式的css全部提取出来写在这个函数中，将其他地方写的样式都删掉，不然可能会权重不够 样式覆盖不掉。 所以删掉最好。
//函数的参数可以给默认值，就是项目初始化时的默认样式。这里只复制了一部分样式。
.theme(@background: #2789ff, @homebg: rgba(37, 37, 37, 1.00), @fontcolor: #fff, @hoverbg: #b9bec9, @activebg: #5193e2, @homeli1: rgba(47, 42, 65, 0.5), @homeli2: #2e3d50) {
    // 头部的样式
    .header_bar {
        background: @background;
        .title {
            color: @fontcolor;
        }
        .user_container {
            .user_message {
                color: @fontcolor;
            }
        }
        .user_manage {
            .ivu-dropdown-rel {
                span {
                    color: @fontcolor;
                }
            }
        }
        .user_alert {
            .user_list:hover {
                background: @background;
                color: @fontcolor;

                .theme_ul li:hover {
                    background: @background;
                    color: @fontcolor;
                }
            }
        }
    }
    // 导航栏的样式
    .router_nav_box {
        .go_back {
            color: @background ;
        }
        .navList .navlist_p1 {
            background: @background;
            color: @fontcolor;
        }
        .nav_box .router_nav:hover {
            border-bottom: 3px solid @background;
            color: @background
        }
        .select {
            border-bottom: 3px solid @background;
            color: @background
        }
    }
    // 列表的样式
    .list_box {
        .list_left {
            // 左边栏的树状结构的选中的样式
            .is-current .el-tree-node__content {
                background: @background;
                color: @fontcolor;
            }
            // 左边栏的滚动条的样式。
            &::-webkit-scrollbar-thumb:hover {
                background: @background;
            }
        }
        .list_right {
            // 第一行标题
            .list_title {
                color: @background;
            }
            // 第二行查询条件
            .list_query {
                .query_nav {
                    .list_query_btn {
                        background: @background;
                        color: @fontcolor;
                    }

                    .el-input__inner:focus {
                        border-color: @background;
                    }
                }
            }
            // 第三行增删改查
            .list_handle {
                p:hover {
                    color: @background;
                }
            }
        }
    }
    // 弹出框的样式
    .alert_box {
        // 头部的背景
        .P_alert_top {
            background: @background;
            color: @fontcolor;
        }
        // 产品弹出框导入已有产品
        .alert_newly span:hover {
            background: @background;
            color: @fontcolor;
            border: none;
        }
        // 产品介绍里面右边的当前选择的样式
        .jieshao_con .jieshao_right .right_ul li .rightNav_active {
            background: @background !important;
        }
        // 输入框聚焦时的边框颜色
        .el-input__inner:focus {
            border-color: @background;
        }
        .el-textarea__inner:focus {
            border-color: @background;
        }
        // 弹出框里有的有选择的按钮
        .alertSelect_btn {
            background: @background;
            color: @fontcolor;
        }
        // 上传图片的按钮样式
        .unload_btn {
            background: @background;
            color: @fontcolor;
        }
        // 分页选中的样式
        .set_page {
            .el-pager .active {
                background: @background  !important;
            }
        }
        .ipt_box::-webkit-scrollbar-thumb:hover {
            background: @background;
        }
        .ivu-table-overflowY::-webkit-scrollbar-thumb:hover {
            background: @background;
        }
    }
}

2. 下面的是color.less文件，用来调用上面的函数

//记得要引入那个文件。
@import url('./theme.less');

// 默认的颜色，因为函数参数有默认值，就可以不用传值了。这个.theme_default就是要给body添加的class名字。
.theme_default {
    .theme()
}
// 青绿色
.theme_darkgreen{
    .theme(#66CCCC,#374158,#fff,#c5cfcb,#99CCCC)
}
// 紫色
.thenm_warm{
    .theme(#CC99CC,#252232,#fff,#D3B3BB,#D885B4)
}

3. 在main.js文件里面引入这个color.less文件。

require('!style-loader!css-loader!less-loader!./assets/color.less'); //引入换肤css

4. 然后添加换肤的点击事件。

     <ul class="theme_ul" v-show='isTheme'>
         <li @click="themeDefault">默认(蓝色)</li>
         <li @click="themeGreen">青绿色</li>
         <li @click="themLink">暖色</li>
     </ul>
//给body添加class名，并将该class保存到localstorage中，用来防止刷新后还原回去了。下次登录后也是这个主题。
    // 默认样式
    themeDefault() {
      document.body.className = 'theme_default';
      localStorage.setItem('themeColor', 'theme_default')
    },
        // 青绿色
    themeGreen() {
      document.body.className = 'theme_darkgreen';
      localStorage.setItem('themeColor', 'theme_darkgreen')
    },
    // 暖色
    themLink() {
      document.body.className = 'thenm_warm';
      localStorage.setItem('themeColor', 'thenm_warm')
    },

5. 在index.html文件里给body初始化的时候添加class。

<script>
  // 给body添加class名 实现换肤，第一次打开时添加默认样式的class就好了
  var bodyClass = localStorage.getItem('themeColor') ? localStorage.getItem('themeColor') : 'theme_default';
  document.body.className = bodyClass;
</script>