vue + vite + sass 配置主题

1. 基本原理
   1. 通过控制根节点的 data-theme 属性值 来取用不同的颜色
   2. 主要 方法 mixin.scss
2. 文件 themeVariable.scss

//themeVariable.scss
$themes:(
  light: ( // 主题色 不会变化
    mian-color:#F5F1E3,
    mian-color-dk:#9C7A4B,
    mian-color-light:#e8dfcc,
    // 主色辅助色 不会变化
    sub-color-dk:#C4A97D,
    sub-color-light:#F8EDC7,
    // 配色 
    color-red: #930000,
    // 文字颜色
    text-color:#9C7A4B,
    // bg
    bg-color:#ffffff,
  ),
  dark: ( // 主题色 
    mian-color:#222222,
    mian-color-dk:#9C7A4B,
    mian-color-light:#e8dfcc,
    // 主色辅助色
    sub-color-dk:#C4A97D,
    sub-color-light:#F8EDC7,
    // 配色 不会变化
    color-red: #930000,
    // 文字颜色
    text-color:#9C7A4B,
    // bg
    bg-color:#222222,
  )) //当HTML的data-theme为dark时，样式引用d

3. mixin.scss

// mixin.scss
@import './themeVariable.scss'; //导入颜色列表
 
//取出主题色
@mixin themify($themes) {
    @each $theme-name,
    $map in $themes {
        $myMap: $map !global; //全局变量供函数调用
        //新定义一个类
        .theme-#{$theme-name} {
            @content; //插入位置
        }
    }
}
 
//从主题色map中取出对应颜色
@function themed($key) {
    @return map-get($myMap, $key)
}
import './themeVariable.scss'; //导入颜色列表
 
//取出主题色
@mixin themify($themes) {
    @each $theme-name,
    $map in $themes {
        $myMap: $map !global; //全局变量供函数调用
        //新定义一个类
        .theme-#{$theme-name} {
            @content; //插入位置
        }
    }
}
 
//从主题色map中取出对应颜色
@function themed($key) {
    @return map-get($myMap, $key)
}
@

4. themify.scss

//themify.scss
//注意一点是，每套配色方案里的key可以自定义但必须一致，不然就会混乱
@import "./themeVariable";

//遍历主题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) !important;
  }
}

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

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

//获取边框
// @mixin border_color($px, $type, $color) {
//   @include themeify {
//     border: $px;
//     border-style: $type;
//     border-color: themed($color) !important;
//   }
// }

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

//获取背景颜色
@mixin background_color_op($color:'bg-color', $opacity:1) {
  @include themeify {
    background-color: rgba(themed($color), $opacity) !important;
  }
}


//按钮混合
@mixin button($value:default) {
  @include themeify {
    background: themed('btn-#{$value}-background') !important;
    border-color: themed('btn-#{$value}-color') !important;
    color: themed('btn-#{$value}-color') !important;
    border: 1px solid;
    border-radius: 10px;
    box-shadow: themed("btn-shadow") !important;

    // &:hover {
    //   background-color: themed('btn-#{$value}-background-hover') !important;
    //   border:themed('btn-#{$value}-border-hover') !important;
    //   color:themed('btn-#{$value}-color-hover') !important;
    // }
  }

}

5.使用

在vueConfig.js 或者 viteConfig.js 中添加应用

css: {
    preprocessorOptions: {
      scss: {
        additionalData: "@import 'styles/index.scss';" // 添加公共样式
      }
    }
  }

\