vue+scss主题色切换

1、新建一个Scss文件_themes.scss，里面可以配置不同的主题配色方案

$themes: ( 
"Red": ( //整体主色调/菜单栏背景/图标.按钮主色/悬停状态
	mainColor: #D6000F, //主题色
	activeMainColor: #ab343c, //页面主标题色/重要文字/弹框标题色
	titleColor: #08121C, //默认字体色/二级信息字体色
	infoColor: #545454, //菜单列表背景色
	menuBackgroundColor:#BC485014, //
	menuIconBackgroundColor:#bc48501f, //默认字体色/二级信息字体/标签默认色
	divInfoColor: #929AA2, //控件不可用/禁用状态/不可点击
	disabledColor: #EAEAEA, //边框描边颜色
	borderColor:#EDF3FE, //整体页面背景色/图标底色/文字信息底色
	bodyBackgroundColor:#F5F7F6, //辅助警示提示作用
	warningColor:#E7D62C, //错误提示文字色/错误提示边框色
	errorColor:#FF542C,
	hoverColor:#fff, ), 
"Blue": ( //整体主色调/菜单栏背景/图标.按钮主色/悬停状态
	mainColor: #409EFF, //菜单选中背景色/点击状态/文字,按钮按下
	activeMainColor: #348eea, //页面主标题色/重要文字/弹框标题色
	titleColor: #08121C, //列表背景色
	menuBackgroundColor:#409EFF14, //
	menuIconBackgroundColor:#409EFF1f, //默认字体色/二级信息字体色
	infoColor: #545454, //默认字体色/二级信息字体/标签默认色
	divInfoColor: #929AA2, //控件不可用/禁用状态/不可点击
	disabledColor: #EAEAEA, //边框描边颜色
	borderColor:#EDF3FE, //整体页面背景色/图标底色/文字信息底色
	bodyBackgroundColor:#F5F7F6, //辅助警示提示作用
	warningColor:#E7D62C, //错误提示文字色/错误提示边框色
	errorColor:#FF542C, hoverColor:#fff, ), 
);

2、新建另外一个sass文件_handle.scss来操作1中的$themes变量

@import "./themes.scss";
//切换主题时 获取不同的主题色值
@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;
        }
    }
}

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

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

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

// 获取主题颜色
@function get-color( $color, $shade: 'mainColor', $map : $themes){
    // check color exists
    @if (map-has-key($map, $color)) {
      $value: map-get($map, unquote($color));
      // check if color or map
      @if type-of($value) == color {
        // return color
        @return $value;
      }
      // check shade of color exists
      @if (map-has-key($value, $shade)) {
        // return shade of color
        @return map-get($value, $shade);
      }
    } 
    // else do nothing
    @return null;
  }

3、具体在vue中使用，直接引入对应混入器就好，取哪个颜色，传哪个key

<style lang="scss" scoped>
    @import "@/style/_handle.scss";
    .common-util {
        font-size: 18px;
        @include font_color("mainColor");
        @include background_color("mainColor");
        @include border_color("mainColor");
    }
</style>

4、声明主题

//换主题
theme(type) {
    window.document.documentElement.setAttribute( "data-theme", type );
}