第一步:创建_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的值
},
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 映射函数 - 简书