Vue中使用Scss实现配置、切换主题方式

@import './common.scss';
$themes: (
  light: (
    bg-color: $white,
    font-color: $regularBlack,
    link-color: $grey,
    icon-home: url('~@/assets/img/icon/lightHomeIcon.svg'),
    icon-filter: url('~@/assets/img/icon/lightFilter.png'),
  ),
  dark: (
    bg-color: $black,
    font-color: $white,
    link-color: $blue,
    icon-home: url('~@/assets/img/icon/darkHomeIcon.svg'),
    icon-filter: url('~@/assets/img/icon/darkFilter.png'),
  )
)

@import "./_themes.scss";

// 从主题色map中取出对应颜色
@function themed($key) {
  @return map-get($theme-map, $key);
}

// 切换主题时 获取不同的主题色值
@mixin themeify {
  @each $theme-name,$theme-map in $themes {
    // !global 把局部变量强升为全局变量
    $theme-map: $theme-map !global;
    // 判断html的data-theme的属性值  #{}是sass的插值表达式
    // & sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
    [data-theme="#{$theme-name}"] & {
      @content;
    }
  }
}


// 获取背景颜色
@mixin background_color($color) {
  @include themeify {
    background-color: themed($color) !important;
  }
}

// 获取背景图片
@mixin background_image($color) {
  @include themeify {
    background-image: themed($color) !important;
  }
}

// 获取图片
@mixin content($color) {
  @include themeify {
    content: themed($color) !important;
  }
}

// 获取字体颜色
@mixin font_color($color) {
  @include themeify {
    color: themed($color) !important;
  }
}

// 获取边框颜色
@mixin border_color($color) {
  @include themeify {
    border-color: themed($color) !important;
  }
}

window.document.documentElement.setAttribute();

// App.vue
<template>
  <div id="app">
    <div class="fun">
      <el-switch
        v-model="switchVal"
        active-color="#2c2c2c"
        inactive-color="#e8e4e4"
        @change="switchChange">
      </el-switch>
    </div>
    <el-menu 
      :default-active="activeIndex" 
      mode="horizontal"
      text-color="#fff"
      background-color="#545c64"
      active-text-color="#ffd04b" 
      @select="handleSelect">
      <el-menu-item index="/home">
        主页
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">图表</template>
        <el-menu-item index="/charts">折线图</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">表格</template>
        <el-menu-item index="/table">普通表格</el-menu-item>
        <el-menu-item index="/dynamicTable">动态表格</el-menu-item>
      </el-submenu>
    </el-menu>

    <router-view/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      switchVal: false,
      activeIndex: '/home',
    }
  },
  methods:{
    switchChange(val){
      if(val){
        window.document.documentElement.setAttribute('data-theme', "dark");
      }else{
        window.document.documentElement.setAttribute('data-theme', "light");
      }
    },
    handleSelect(key, keyPath) {
      this.$router.push(key)
    }
  },
  mounted(){
    this.switchChange(this.switchVal);
  }
}
</script>

<style lang="scss">
// 引入主题配置文件
@import "@/assets/css/_handle.scss";
#app {
  height: 100vh;
  text-align: center;
  @include background_color('bg-color');
  // background_color 为 _handle.scss 文件中配置好的属性，传入'bg-color'即可通过当前的主题配置在 _theme.scss 文件中取色。 
  .fun{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 5px;
    box-sizing: border-box;
  }
}
</style>

<style lang="scss" scoped>
@import "@/assets/css/_handle.scss";
.home{
  text-align: center;
  @include font_color('font-color');
  .homeIcon{
    width: 14px;
    height: 14px;
    margin-right: 5px;
    display: inline-block;
    background-size: 100% 100%;
    @include background_image('icon-home');
  }
  a{
    @include font_color('link-color');
  }
}
</style>