vue-element-admin主题换肤

预览：

http://e1fang.gitee.io/change-theme-preview

思路：

1. themePicker切换主题
2. vuex（改变state里的theme）
3. app里判断theme 给最外层div加一个class名， class名用scss层层嵌套改css
4. vuex分发theme状态到组件 组件内判断theme切换颜色json
5. 目前最多支持三种主题切换

themePicker

两个主题选项切换 切换成功就弹出信息框并重定向页面帮助组件刷新

data() {
    return {
      themeOptions: [
        { label: 'bright', value: 'bright' },
        { label: 'dark', value: 'dark' }
      ]
    }
  },
  computed: {
    theme() {
      return this.$store.getters.theme
    }
  },
  methods: {
    changeTheme(theme) {
      this.$store.dispatch('app/setTheme', theme)
      console.log(theme)
      this.refreshView()
      this.$message({
        message: 'Switch Theme Success',
        type: 'success'
      })
    },
    refreshView() {
      const { fullPath } = this.$route
      console.log(fullPath)
      this.$nextTick(() => {
        this.$router.replace({
          path: '/redirect' + fullPath
        })
      })
    }
  }

app里动态绑定样式

将cssObj绑定到最外层div

computed: {
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        darkTheme: this.theme === 'dark'
      }
    },
    theme() {
      return this.$store.getters.theme
    }
  },

css覆盖

.darkTheme{
    .app-main{
        background: rgb(34, 41, 55) !important;  
    }
    .navbar{
        background: #2b3343 !important;
        //导航顶部文字
        .el-breadcrumb__inner span{
            color: white !important;
        }
        //顶部图表插件背景色
        .icon-wrapper{
            background: rgb(43,51,67) !important;
        }
        //显示侧边导航的图表填充
        svg{
            fill: rgb(216, 228, 238);
        }
    }
    //模块底部颜色
    .app-container {
        background: rgb(43,54,72);
        //模块字体颜色
        .p-wrapper{
            color: white !important;
        }
      }

    .scrollbar-wrapper {
        background:rgb(22,27,37);
        .el-tooltip{
            background: rgb(22, 27, 37);
        }
    }
    //百度地图背景色
    .bmap-wrapper{
        background: rgb(43,54,72);
        color:white;
    }
    //各模块loding遮罩颜色
    .el-loading-mask{
        background-color: rgba(90, 89, 89, 0.2) !important;
      }
}

组件内根据theme的值判断使用何种主题json

组件

...
import themeJson from '@/assets/json/theme.json'
...
data() {
  return {
    darkTheme: themeJson.darkTheme,
    brightTheme: themeJson.brightTheme,
  }
}

computed:{
  themeStyle() {
      if (this.theme === 'dark') {
        return this.darkTheme
      } else {
        return this.brightTheme
      }
    }
}

json

{
  "darkTheme": {
    "chartColor": {
      "bgColor": "rgb(43,54,72)",
      "fontColor": "white",   
      "tipbgColor":"rgb(43,54,72)",
      "tipfontColor": "white",
      "XaxisLine":"#a1aaff80",
      "xaxisLabel":"#ffffff99",
      "YsplitLine":"#a1aaff80",
      "YaxisLabel":"#ffffff99"
    }
  },
  "brightTheme": {
    "chartColor": {
      "bgColor": "white",
      "fontColor": "black",
      "tipbgColor":"white",
      "tipfontColor": "black",
      "XaxisLine":"black",
      "xaxisLabel":"black",
      "YsplitLine":"black",
      "YaxisLabel":"black"
    }
  }
}