在sass中动态主题色切换

在sass中动态主题色切换

第一种方式(使用@mixin指令)

定义不同的主题色

$themes: (
  oldUi: (
    color: #1fbb7d,
    bg_color:#1fbb7d
  ),
  newUi: (
    color: #0A6CFF,
    bg_color:#0A6CFF
  )
);
@mixin theme {
  @each $themes-key, $themes-map in $themes {
    $themes-map: $themes-map !global;
    [data-theme=#{$themes-key}] & {
      @content;
    }
  }
}
// 获取对应的主题数据
@function t($key){
  @return map-get($themes-map,$key)
}

在外层使用data-theme设置不同的主题色

<div data-theme='newUi'></div>

使用

@import '../../theme.scss';
.icon{
    border: 1px solid red;
    @include theme{
        color: t('color');
    }
}

想要动态切换主题色只需要动态控制data-theme的值发生改变即可

第二种方式（使用css3的var函数）

定义两种不同的主题

:root[colorTheme='oldUI']{
  --theme-color:#1FBB7D;
}
:root[colorTheme='newUI']{
  --theme-color:#0A6CFF;
}

通过设置document属性达到切换动态控制主题切换

 document.documentElement.setAttribute('colorTheme','newUI')

使用

.btn-primary {
  color: #fff;
  background-color: var(--form-theme-color);
}