vue+less切换主题

1，创建changeColor.less文件(切换主题的函数定义文件)引入theme.less文件(执行主题切换的函数文件)

        changeColor.less里写上要切换的主题class，调用主题切换函数传入对应的颜色

changeColor.less

@import url('./theme.less');

// 默认颜色 - 蓝色
.themeBlue{
  .change();
}

// 绿色
.themeGreen{
  .change( #0b9f62, #059559, #D4F6E8, linear-gradient(90deg,#0b9f62,#22d189), linear-gradient(90deg,#22d189,#0b9f62), linear-gradient(0,#22d189,#0b9f62));
}

// 红色
.themeRed{
  .change( #fe5155, #f14246, #FBE6E5, linear-gradient(90deg,#fe5155,#fe6f63), linear-gradient(90deg,#fe6f63,#fe5155), linear-gradient(0,#fe6f63,#fe5155));
}

// 灰色
.themeGray
{
  .change( #2e2e2e, #525252, #D9D9D9, linear-gradient(90deg,#2e2e2e,#525252), linear-gradient(90deg,#525252,#2e2e2e), linear-gradient(0,#525252,#2e2e2e));
}

2，创建theme.less文件定义颜色变量

        theme.less里写上主题颜色切换函数接收颜色变量，设置默认值是蓝色背景，里面写上主题切换后需要更改颜色的css定义

theme.less

.change(
  @primaryColor: #4395ff;
  @subColor: #3485fb;
  @lightColor: #CEE6FE;
  @backgroundLineX: linear-gradient(90deg,#3e52ec,#449dfe);
  @backgroundLineXF: linear-gradient(90deg,#449dfe,#3e52ec);
  @backgroundLineY: linear-gradient(0,#3e52ec,#449dfe);
) {
  // 整体
  #app{ background: @backgroundLineX;}
  //顶部
  .headerTop { background: @backgroundLineX; height: 85px; position: relative; z-index: 9}
  a:hover{ cursor: pointer; color: @subColor}

  .color-primary{color: @primaryColor}

  //列表页面
  .el-table .tableReName{color: @subColor}
  .el-table .tableIcon{color: @primaryColor}
  .el-table .tableIcon:hover{color: @subColor - 90}

   // 进度条
  .progress-bar { background:@backgroundLineXF;}
  .progress-bar.co-n{ background:@primaryColor; }

}

3，在app.vue使用

        引入切换主题less文件，在计算属性里返回当前颜色主题，watch监听主题切换后设置body的class为当前设置的主题class实现整体的主题切换，用vuex和localStorage存储当前主题选项保证刷新页面主题不会变化

<template>
  <div id="app">
    <app-view></app-view>
  </div>
</template>

<script>
import view from 'components/packages/view/view';
import '../../assets/css/changeColor/changeColor.less'; //引入切换主题less文件
export default {
  name: 'app',
  components: {
    'app-view': view
  },
  data () {
    return {};
  },
  computed: {
    // 换肤
    ccstyle () {
      // let Global = JSON.parse(sessionStorage.getItem('Global'));
      let ccstyle = this.$store.state.user.ccstyle || localStorage.getItem('doctorInfo_ccstyle') || 'themeBlue';
      return ccstyle;
    }
  },
  watch: {
    ccstyle () {
      // console.log(this.ccstyle);
      if (this.ccstyle == 'themeBlue' || this.ccstyle == 'themeRed' || this.ccstyle == 'themeGreen' || this.ccstyle == 'themeGray') {
        // 把body的class切换成选择的主题class
        document.querySelector('body').className = this.ccstyle;
        this.$store.commit({
          type: 'changeTheme',
          ccstyle: this.ccstyle
        });
      } else {
        document.querySelector('body').className = 'themeBlue';
        this.$store.commit({
          type: 'changeTheme',
          ccstyle: 'themeBlue'
        });
      }
    }
  },
  mounted () {
    if (this.ccstyle == 'themeBlue' || this.ccstyle == 'themeRed' || this.ccstyle == 'themeGreen' || this.ccstyle == 'themeGray') {
      document.querySelector('body').className = this.ccstyle;
      this.$store.commit({
        type: 'changeTheme',
        ccstyle: this.ccstyle
      });
    } else {
      document.querySelector('body').className = 'themeBlue';
      this.$store.commit({
        type: 'changeTheme',
        ccstyle: 'themeBlue'
      });
    }
  },
  methods: {}
};
</script>

4，切换主题操作

页面代码

<el-dropdown class="set">
        <div  class="skin white" style="color: #fff;">
          <i class="el-icony-huanfu"></i>
          设置皮肤
        </div>

        <el-dropdown-menu slot="dropdown" class="skinDropdown">
          <el-dropdown-item :class="{on:$parent.ccstyle=='themeBlue'}"><span
            @click="changeThemeColor('themeBlue')">深邃蓝</span></el-dropdown-item>
          <el-dropdown-item :class="{on:$parent.ccstyle=='themeGreen'}"><span @click="changeThemeColor('themeGreen')">森林绿</span>
          </el-dropdown-item>
          <el-dropdown-item :class="{on:$parent.ccstyle=='themeRed'}"><span
            @click="changeThemeColor('themeRed')">明亮红</span></el-dropdown-item>
          <el-dropdown-item :class="{on:$parent.ccstyle=='themeGray'}"><span
            @click="changeThemeColor('themeGray')">暗灰色</span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

methods代码 

methods: {
      changeThemeColor (ccstyle = 'themeBlue') {
        if (ccstyle == 'themeGreen') {
          this.$store.commit({
            type: 'changeTheme',
            ccstyle: 'themeGreen'
          });
        } else if (ccstyle == 'themeRed') {
          this.$store.commit({
            type: 'changeTheme',
            ccstyle: 'themeRed'
          });
        } else if (ccstyle == 'themeGray') {
          this.$store.commit({
            type: 'changeTheme',
            ccstyle: 'themeGray'
          });
        } else {
          this.$store.commit({
            type: 'changeTheme',
            ccstyle: 'themeBlue'
          });
        }
      },
}

vuex代码，主题切换后app.vue 页面计算属性会改变ccstyle变量，watch会监听到然后改变主题颜色

mutations: {
    changeTheme (state, payload) {
      // let Global = JSON.parse(sessionStorage.getItem('Global'));
      state.ccstyle = payload.ccstyle;
      localStorage.setItem('doctorMgr_ccstyle', payload.ccstyle);
    }
}