$themes: (
light: (
font_color: #fff,
),
dark: (
font_color: #000,
),
);
@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: themed($color) !important;
}
}
//获取字体颜色
@mixin font_color($color) {
@include themeify {
color: themed($color) !important;
}
}
@mixin stroke_color($color) {
@include themeify {
stroke: themed($color) !important;
}
}
@mixin font_fill($color) {
@include themeify {
fill: themed($color) !important;
}
}
@mixin border($color) {
@include themeify {
border: themed($color) 1px solid;
}
}
@mixin border_color($color) {
@include themeify {
border-color: themed($color) !important;
}
}
@mixin border_bottom_color($color) {
@include themeify {
border-bottom-color: themed($color) !important;
}
}
@mixin border-bottom($color) {
@include themeify {
border-bottom: themed($color) 1px solid !important;
}
}
上面是theme.scss 文件 light，dark 黑白主题配置颜色。
在项目中使用案例如下：
@include background_color('font_color'); //背景颜色
@include border_color('font_color'); //边框颜色
切换data-theme:
if (this.$store.state.dark) {
window.document.documentElement.setAttribute('data-theme', 'dark');
} else {
window.document.documentElement.setAttribute('data-theme', 'light');
}黑：
<html lang="" data-theme="dark"></html>白：
<html lang="" data-theme="light"></html>
扫一扫
1316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
