scss 切换主题色

新建 _handle.scss

@import "./_themes.scss"; 
//此处用了sass的map遍历、函数、map存取、混合器等相关知识，
//详细API参考https://www.sass.hk/docs/
//遍历主题map
@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;
    }
  }
}
//声明一个根据Key获取颜色的function
@function themed($key) {
  @return map-get($theme-map, $key);
}
//暂时想到的常用的开发场景下面三种背景颜色、字体颜色、边框颜色  至于阴影什么之类的忽略了
//获取背景颜色
@mixin background_color($color) {
  @include themeify {
    background-color: themed($color);
  }
}
//获取字体颜色
@mixin font_color($color) {
  @include themeify {
    color: themed($color);
  }
}
//获取边框颜色
@mixin border_color($color) {
  @include themeify {
    border-color: themed($color);
  }
}

新建_themes.scss

//定义全局主题&颜色的map数组，鉴于V5只有白天和晚上的主题，此处仅定义这两种
//切记 所有颜色一式两份儿，务必保证key值统一，key值可以自定义，注意避免$%_之类的，
//与sass自有符号冲突，见文知意即可
//另外如果基于其他UI框架，如本项目基于element-ui，则只需设置一套dark主题，
//data-theme为dark时，样式引用dark
//data-theme为其他值时，自然就采用了elementui的默认样式
$themes: (
  light: (
    font_color1:black,
    font_color2: rgb(110, 109, 109),
    background_color1:rgba($color: #0f4359, $alpha: 0.8) ,
    background_color2: rgb(87, 87, 226),
    border_color1: rgb(231, 181, 181),
    border_color2: rgb(9, 255, 0),
  ),
  dark: (
    font_color1: #ffffff,
    font_color2: rgb(255, 255, 255),
    background_color1: rgba($color: #224169, $alpha: 0.4),
    background_color2: rgb(255, 0, 21),
    border_color1: rgb(9, 255, 0),
    border_color2: rgb(231, 181, 181),
  )
);

在项目中，在一键切换的地方，根据自己的情况设置 data-theme 的 颜色

  window.document.documentElement.setAttribute(
    "data-theme",
    mapStyle === "aegis://styles/aegis/StreetsDark" ? "dark" : "light"
  );

在css上面使用

导入
@import "../../styles/_handle.scss";

.BaseMapClass {
  @include font_color("font_color1");
  @include background_color("background_color1");
  @include border_color("border_color1");
}

.one {
  position: absolute;
  top: 80px;
  left: 20px;
  height: 400px;
  color: #fff;
  @include background_color("background_color1");
  border-radius: 40px;
  width: 420px;
}