//当HTML的data-theme为dark时,样式引用dark
//data-theme为其他值时,就采用组件库的默认样式
//这里我只定义了两套主题方案,想要再多只需在`$themes`里加就行了
//注意一点是,每套配色方案里的key可以自定义但必须一致,不然就会混乱
$themes: (
green: (
//字体
font_color1: #07bc78,
//背景
background_color1: #07bc78,
background_color2: #18b277,
background_color3: #0aa170,
// 主体颜色
main-background_color1: #eff4ee,
// 按钮颜色
btn_color:#07bc78,
//边框
border_color1: #07bc78,
// 阴影
box_shadow_color:rgba(56,210,78,0.6)
),
pink: ( //字体
//字体
font_color1: #ff4b50,
//背景
background_color1: #ff4b50,
background_color2: #ff4b50,
background_color3: #ff4b50,
// 主体颜色
main-background_color1: #f4eef0,
// 按钮颜色
btn_color:#ff4b50,
//边框
border_color1: #ff4b50,
// 阴影
box_shadow_color:rgba(255, 75, 80,0.6)
));
//遍历主题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_line_color($color,$num:1px) {
@include themeify {
border: $num solid themed($color) !important;
}
}
// 阴影
@mixin box-shadowr($shadows,$color) {
@include themeify {
box-shadow: $shadows themed($color) !important;
}
}
.button {
width: 132px;
height: 36px;
line-height: 34px;
font-size: 16px;
letter-spacing: 1px;
color: #ffffff;
//设置背景颜色
@include background_color("background_color1");
border-radius: 4px;
//设置边框颜色
@include border_line_color("border_color1");
box-sizing: border-box;
cursor: pointer;
}
全局的地方使用方法
window.document.documentElement.setAttribute( "data-theme", 'pink' );