vue + scss实现管理系统换肤功能

因公司需求，需要实现管理系统主题换肤功能，主要是实现4种不同的系统肤色，极简白、幻境紫、景泰蓝、复古黑，这不仅仅是颜色的更改，还需要包括图片，字体、按钮等更改。通过scss写函数传递参数来实现4种不同的换肤功能：

在styles样式文件夹下创建两个scss文件，一个theme.scss,一个color.scss

1.theme.scss文件主要实现的是编写对系统主题改变的样式函数，通过传递样式参数来实现不同主题的样式更改

/**
  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编写不同主题的样式函数并传递样式参数

@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. 在index.html编写以下js代码主要是给body标签动态添加className

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

4. 切换系统主题并把当前选中的主题存入缓存

<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
    },
  }
}