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

1. 样式文件目录介绍

本项目中的公共样式文件均位于 src/assets/css 目录下，其中 index.scss是总的样式文件的汇总入口 ，common.scss 是供全局使用的一些基本样式(常量）， _theme.scss、_handle.scss 两个文件是进行主题颜色配置的文件。

如下图，将 index.scss 在 main.js 文件中引入即可全局使用。.

2. 主题 scss 文件配置

src/assets/css 目录下的 _themes.scss，里面可配置不同的主题配色方案，本文配置了两个主题颜色：light、dark。

@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'),
  )
)

src/assets/css 目录下的 _handle.scss 用来操作上述 _themes.scss 中 $theme 的变量，_handle.scss 文件内容：

@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;
  }
}

3. 组件中使用

样式文件都配置完成了，怎么设置当前需要使用的主题呢 ？

• 此处具体情况具体分析，在合适的页面或位置写入即可，本文是写在了 App.vue 项目入口文件中，通过

window.document.documentElement.setAttribute();

方法传入当前想要使用的主题。本文默认传入的 ‘light’，则 vue 页面中使用的即为 _theme.scss 中的 light 对象下配置好的颜色或者其他属性；

• 设置其他主题色（如：dark、blue）同理，前提是 _theme.scss 文件中存在配置好的对应主题样式；

// 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>

home.vue 中同理

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

4. 效果