scss切换主题风格

第一步：创建_main.scss文件，定义一个map类型的变量$themes，相当于JS中的对象，不过是用圆括号包裹。$themes中定义不同的主题名称，这里是light，dark。再定义主题对应的颜色。注意不同主题色的键值对的键名要相同。

// _main.scss
// 当HTML的data-theme为dark时,样式引用dark
// data-theme为其他值时,就采用组件库的默认样式
// 暂时只定义了两套主题方案,想要再多只需在`$themes`里加就行了
// 注意一点是,每套配色方案里的key可以自定义但必须一致,不然就会混乱
$themes: (
  light: (
    // 规范
    // 品牌色
    pftc1: #d3e7f9,
    // 错误色
    eftc1: #f6a3a4,
    // 成功色
    sftc1: #aef7bd,
    // 告警色
    wftc1: #f8e6c2,
    // 字体颜色
    bftc1: #181818, // 标题颜色
    bftc2: #383a3d, // 正文颜色
    bftc3: #5f6875, // 次级颜色
    bftc4: #8f9cae, // 次二级颜色
    bftc5: #b5bdc8, // 禁用或置灰
    cftc1: #ffffff, // 选中按钮字体颜色
    // 背景颜色
    bbgc1: #f5f7fa, // 主要
    bbgc2: #f5f7fa, // 白色背景上的背景色
    bbgc3: #ffffff, // 白色卡片
    bbgc4: #ffffff, // 视频卡片（暂时不处理）
    bbgc5: #ffffff, // 文本输入框填充
    // 浅色背景
    bbgc6: #fff,
    bbgc7: #f8f8f9,
    bbgc8: rgba(70,76,91,.9),
    bbgc9: #f8f8f8,
    bbgc10: #ffffff,
    bbgc11: #E8F5FF, // 全屏按钮背景色
    bbgc12: #ffffff,
    bbgc13: #f8f8f8,
    bbgc14: #ffffff,
    // 边框、线条
    bbdc1: #e3e6ed, // 边框颜色、下划线颜色
    bbdc2: #EBEEF5,
    bbdc3: #E6EBF5,
    bbdc4: #f8f8f8,
    bbdc5: transparent,
    bbdc6: #d9d9d9,
    // 通用卡片投影
    bbs1: 0px 2px 8px 0px rgba(213, 213, 218, 0.45),
    bbs2: none,
    //通用卡片圆角
    borderRadius: 4px,
    //导航或者 树item  hover
    tbgc1: #e0f0fe,
    tftc1: #1c90f7,
    disinfectionimg: url("~@/assets/image/disinfection/img/list-white.svg"),
    // 按钮
    // 蓝色按钮
    formBtnBlueDisabledColor: #f5f5f5,
    formBtnBlueDisabledborder: #d1d1d1,
    // 红色按钮
    formBtnRedColor: #ff4d4f,
    formBtnRedDisabledColor: #f5c1c4,
    // 边框按钮
    btnBorderBackground: #ffffff,
    btnBorderBackgroundHover: #f0f6ff,
    btnBorderBorderHover: #91beff,
    formDisabledBackgroundColor: #ededed,
    formDateTimeFontColor: #555,
    formDateTimeFontHoverColor: #333,
    formDateTimeBGColor: #ededed,
    formDateTimeFontActiveColor: #333,
    formDateTimeRightColor: #ccc,
    // 切换按钮
    formBtnSwitchColor: #5f6875,
    formBtnSwitchBackground: #ffffff,
    formBtnSwitchBorder: #e3e6ed,
    formBtnSwitchActiveColor: #ffffff,
    //基础配置组件输入框placeholder
    inputStylePlaceholder:#B5B5B5,
    itemHover:#BCE6FF,
    // 分页按钮边框
    paginationBorder:#dedede,
    //数据权限 选择框颜色
    checkboxColor:#f8f8f8,
    checkboxBdColor:#ccc,
    dataCenter_background1:-webkit-linear-gradient(left,#383840,#383840),
    dataCenter_background2:-webkit-linear-gradient(left,#383840,#383840),
    dataCenter_background3:rgba(255,255,255,0.8),
    dataCenter_fontColor1:#96a8dc,
    dataCenter_fontColor2:#666,
    dataCenter_fontColor3:#383840,
    datacenter_check_font: #383840,
    el_radio_button_inner_color: auto,
    el_radio_button_inner_checked_bgc: auto,
    cardTitleColor: #383840,
    formColor: #383840,
    el_radio_button_inner_border_color: auto,
    el_radio_button_inner_bgc:  auto
  ),
  dark:(
    // 规范
    // 品牌色
    pftc1: #1c90f7,
    // 错误色
    eftc1: #ff4d4f,
    // 成功色
    sftc1: #0AD69B,
    // 告警色
    wftc1: #FAAD14,
    // 字体颜色
    bftc1: #edf5fc, // 标题颜色
    bftc2: #dae6f1, // 正文颜色
    bftc3: #83a0ca, // 次级颜色
    bftc4: #4a80ce, // 次二级颜色
    bftc5: #44699d, // 禁用或置灰
    cftc1: #ffffff, // 选中按钮字体颜色
    // 背景颜色
    bbgc1: #001d45, // 主要
    bbgc2: #0b337b, // 蓝色卡片上的色块
    bbgc3: #062865, // 蓝色卡片
    bbgc4: #001e4d, // 视频卡片（暂不处理）
    bbgc5: #012361, // 文本输入框填充
    // 浅色背景
    bbgc6: #4B5999,
    bbgc7: #6072C4,
    bbgc8: #4B5999,
    bbgc9: #00113a,
    bbgc10: #00113a,
    bbgc11: #172D75, // 全屏按钮背景色
    bbgc12: #001d45,
    bbgc13: #010d29,
    bbgc14: transparent,
    // 边框、线条
    bbdc1: #0660b0, // 边框颜色、下划线颜色
    bbdc2: #3B4578,
    bbdc3: #15469D,
    bbdc4: #1a3166,
    bbdc5: #8669fb,
    bbdc6: #1a3166,
    // 投影
    bbs1: none,
    bbs2: inset 0 0 10px 0 #396dff,
    //通用卡片圆角
    borderRadius: 4px,
    //导航或者 树item  hover
    tbgc1: #1c90f7,
    tftc1: #ffffff,
    disinfectionimg: url("~@/assets/image/disinfection/img/list-bgc.svg"),
    // 按钮
    // 蓝色按钮
    formBtnBlueDisabledColor: #02327b,
    formBtnBlueDisabledborder: #02327b,
    // 红色按钮
    formBtnRedColor: #aa1b1d,
    formBtnRedDisabledColor: #661314,
    // 边框按钮
    btnBorderBackground: transparent,
    btnBorderBackgroundHover: #012361,
    btnBorderBorderHover: #0090e7,
    formDisabledBackgroundColor: #1d2c4c,
    formDateTimeFontColor: #6c7dad,
    formDateTimeFontHoverColor: #409eff,
    formDateTimeBGColor: #f2f6fc,
    formDateTimeFontActiveColor: #fff,
    formDateTimeRightColor: #1a3165,
    // 切换按钮
    formBtnSwitchColor: #83a0ca,
    formBtnSwitchBackground: #0e3c8f,
    formBtnSwitchBorder: #0e3c8f,
    formBtnSwitchActiveColor: #edf5fc,
    //基础配置管理 输入框placeholder
    inputStylePlaceholder:var(--el-placeholder-font-color),
    itemHover:var(--liBg),
    // 分页按钮边框
    paginationBorder:#606f9a,
    //数据权限 选择框颜色
    checkboxColor:#3a4152,
    checkboxBdColor:#3a4152,
    dataCenter_background1:-webkit-linear-gradient(bottom,#4992FF,#50F2FF),
    dataCenter_background2:-webkit-linear-gradient(bottom,#50EEFF,#fff),
    dataCenter_background3: rgba(6, 21, 59, 0.8),
    dataCenter_fontColor1:#96a8dc,
    dataCenter_fontColor2:#AFAECF,
    dataCenter_fontColor3:#ffffff,
    datacenter_check_font: #afaecf,
    el_radio_button_inner_color: #73afef,
    el_radio_button_inner_checked_bgc: #15418e,
    cardTitleColor: #fff,
    formColor: #cdd8f7,
    el_radio_button_inner_border_color: #1a3165,
    el_radio_button_inner_bgc:  #0f2346
  )
);

第二步：创建handle.scss文件夹，导入_main.scss文件。

1、定义混入器themeify，用来获取data-theme的值。

2、@each遍历themes的键值对， themes的键值对，theme-name对应light，dark。$theme-map对应light，dark的值。这两个变量名随意设定。

3、@content用来在引用themeify时导入内容。如果data-theme=light，就会编译成[data-theme=light] .class { }

4、再定义一个函数themed，根据data-theme和传过来的$key去theme.scss里获取相应的颜色。

@import "./_main.scss";

//遍历主题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) {
  @if map-has-key($theme-map, $key) {
    @return map-get($theme-map, $key);
  } @else {
    @error "The key #{$key} isn’t defined in the map $theme-map´";
    @return null
  }
}

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

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


.container{
  @include background_color('eftc1');
  @include border_color('pftc1')
}

 第三步，代码中使用

// header.vue
/** 设置主题 */
//data值为light,dark
changeTheme(data) {
    window.document.documentElement.setAttribute('data-theme', data); // 给根节点设置data-theme属性，切换主题色就是修改data-theme的值
},

<style lang="scss" scoped>
@import "src/common/scss/handle.scss
.container{
  @include background_color('eftc1');
  @include border_color('pftc1')
}

</style>

补充知识点：

1、map-has-key()函数

map-has-key() 函数判断映射是否有对应的键值，有则返回true，没有返回false。

事例：

$map:("a": 1, "b":2, "c":3);

.one{   
    content: map-has-key($map, "a");
}


//编译后
.one {
  content: true;
}

2、map-get()函数用于返回映射中指定键所对应的值

事例：

$map:("a": 1, "b":2, "c":3);

.one{   
    content: map-get($map, "a");
}

//编译后
.one {
  content: 1;
}

参考文档 :Sass 映射函数 - 简书