Vue implements element-ui custom theme color switching (simple version)

Requirements: By clicking the icon, the page effect of day and night can be realized. You can customize the color, handwriting, which is relatively simple. If you need complex functions, you can switch all the theme colors of element-ui according to the color selector. You can read my other article : still writing

Effect:

 1. Define an icon for switching themes

 <!-- 切换主题 -->
          <div @click="handleChangeStyle()">
            <el-tooltip content="切换主题" placement="bottom">
              <i :class="globalTheme ? 'el-icon-moon' : 'el-icon-sunny'"></i>
            </el-tooltip>
          </div>

2. Define a global bus for data output and input

Just add this sentence in main.js

Vue.prototype.$bus=new Vue();

3. Import data after clicking the icon

 this.globalTheme: default is false

     handleChangeStyle() {
            // 切换主题
            this.globalTheme = !this.globalTheme;
           this.$bus.$emit('global_theme', this.globalTheme); // 将 globalTheme 的值传给父组件
        }

4. Write in app.vue

<template>
  <div id="app" :class="style ? 'theme1' : ''">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data(){
    return{
      style: false
    }
  },
  created(){
    this.$bus.$on('global_theme', (msg) => {    // 接收子组件传来 global_theme 的值
      this.style = msg;
    });
  }
}
</script>

5. Create theme.scss

Here is your custom color, import it in main.js to complete

.theme1{
  /* 将自己想要换肤后变化的样式写入该处，根据自己的需要进行修改和添加 */
  .sidebar-el-menu:not(.el-menu--collapse) {
    background: #012d4b !important;
  }
  .sidebar > ul {
    background: #012d4b !important;
  }
  /* 左侧菜单栏样式 */
  .el-menu-item{
    color: white !important;    /* 默认 black */
    background: #012d4b !important;
  }
  .el-menu-item, .el-submenu__title {
    background: #012d4b !important;
  }
  
  /* 页面顶部的样式 */
  .header {
    /* background-image:url("../../assets/img/main-bg1-top.jpg");
    background-repeat:no-repeat;
    background-size:100% 200%; */
    background-color: #001d30 !important;
    color: white !important;
  }
  .el-dropdown-link {
    color: white !important;
  }
  
  /* --------------- 水平一级菜单栏的样式--------------------- */
  .el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: 2px solid #7FFFD4 !important;    /* 默认 blue */
    color: #7FFFD4 !important;    /* 默认 blue */
  }
  .el-menu--horizontal > .el-menu-item {
    background: transparent !important;
    color: white !important;    /* 默认 black */
  }
  .el-menu--horizontal > .el-menu-item:hover {
    background: transparent !important;
    color: white !important;
  }
  
  /* 消息按钮颜色样式 */
  .el-icon-bell{
    color: white;
  }
  .el-icon-caret-bottom{
    color: white;
  }
}

This is the end of the article, I hope it will be helpful to you~~