Vue + scss realizes the skinning function of the management system

Due to the needs of the company, it is necessary to realize the theme skinning function of the management system, mainly to realize 4 different skin colors of the system, minimalist white, fantasy purple, cloisonné, and retro black. This is not only a change of color, but also needs to include pictures, fonts, Button etc. change. Pass parameters through the scss writing function to achieve 4 different skinning functions:

Create two scss files under the styles folder, one theme.scss and one color.scss

1. Theme.scss file mainly implements the style function that changes the system theme, and realizes the style change of different themes by passing style parameters

/**
  theme.scss 主要是写实现样式的函数
  实现换肤的样式函数
  $background 主题背景色
  $tabBgImgs tabs 背景图
  $tabsColors tabs 未选中文字图标的颜色
**/
@mixin theme($background, $tabBgImgs, $tabsColors) {
    
    
  // 编写需要换肤的系统样式
  
   // 左侧 tabar
  .sidebar-container {
    
    
    background: $tabBgImgs;
    background-repeat: no-repeat;
    background-size: cover;
  }
  ......
}

2.color.scss writes style functions of different themes and passes style parameters

@import "./theme.scss";


// 极简白
.theme_default {
    
    
  @include theme(#fff, url('../assets/themeImg/navBar1.png'), #303133)
}

// 景泰蓝
.theme_blue {
    
    
  @include theme(#4671f6, url('../assets/themeImg/navBar2.png'), #fff)
}

// 复古黑
.theme_black {
    
    
  @include theme(#1b1c2f, url('../assets/themeImg/navBar3.png'), #fff)
}


//  幻境紫
.theme_purple {
    
    
  @include theme(#dad4fa, url('../assets/themeImg/navBar4.png'), #fff)
}

3. Writing the following js code in index.html is mainly to dynamically add className to the body tag

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

4. Switch the system theme and store the currently selected theme in the cache

<el-dropdown class="avatar-container right-menu-item hover-effect myMassage" style="margin-right: 0" placement="bottom-end" :hide-on-click="true" trigger="click" size="mini" @command="themeDefault">
  <span class="el-dropdown-link">
    <div class="avatar-wrapper">
      <span class="user-avatar"><span class="circleTile" :style="{ background: currentTheme.color }" />{
    
    {
    
     currentTheme.name }}<i class="el-icon-arrow-down el-icon--right" /></span>
    </div>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item v-for="(item, code) in themeList" :key="code" :command="item.code"> <span class="circle" :style="{ background: item.color }" />{
    
    {
    
     item.name }} </el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

export default {
    
    
  data() {
    
    
    return {
    
    
      currentTheme: null,  // 当前系统主题
      themeList: [
        {
    
     code: 1, name: '极简白', color: '#fff', type: 'theme_default' },
        {
    
     code: 2, name: '幻境紫', color: '#dad4fa', type: 'theme_purple' },
        {
    
     code: 3, name: '景泰蓝', color: '#4671f6', type: 'theme_blue' },
        {
    
     code: 4, name: '复古黑', color: '#1b1c2f', type: 'theme_black' },
      ], // 定义4种系统主题
    }
  },
  mounted() {
    
    
    this.getCurrentTheme()
  },
  methods: {
    
    
    // 初始化加载存入缓存的系统主题 没有默认展示第一条系统主题
    getCurrentTheme() {
    
    
      const themeColor = localStorage.getItem('themeColor')
      if (!themeColor) {
    
    
        this.currentTheme = this.themeList[0]
        return
      }
      this.currentTheme = this.themeList.find((item) => item.type == themeColor)
    },
    // 点击切换系统主题
    themeDefault(e) {
    
    
      const themeList = this.themeList
      const setTheme = themeList.find((item) => item.code == e)
      localStorage.setItem('themeColor', setTheme.type)
      this.currentTheme = setTheme
      document.body.className = setTheme.type
    },
  }
}