Theme层代码实现
只要全局加上一个属性选择器,就搞定了~~~
做成属性选择器
html的代码
<div data-theme="default">
css的代码
[data-theme= 'default' ] .box {background:pink;
}
[data-theme= "cool'] .box{background: blue;
}
[data-theme= 'warm'] .box{background: yellow;}
如何对全局页面产生影响 提升到全局
1,将data-theme="default提升到 html 结构
用js控制变色,在app.vue写上这个代码
import {onMounted} from 'vue'export default {
setup() {
onMounted(() =>{
window.document.documentElement.setAttribute(
"data-theme",
"cool"
);
})}}
2,将样式提升到全局
在theme层上新建三个文件不同颜色 导入到index.scss
引用sass文件编写
/* 默认主题色 */
$theme-default: (
t-color-primary : (
color: #FF5777
),
t-shadow : (
shadow: 0 0 8px #FF5777
),
t-border : (
border: 1Px solid #FF5777
)
)
用sass来生成主题色切换
@import "./theme-default.scss";
@import "./theme-cool.scss";
@import "./theme-warm.scss";
$themes: (
default: $theme-default,
cool: $theme-cool,
warm: $theme-warm
);
@mixin themable {
@each $section, $map in $themes {
$map: $map !global;
[data-theme="#{$section}"] & {
@content;
}
}
}
@function themed($key, $color) {
@return map-get(map-get($map, $key), $color)
};
@mixin t-color-primary($style) {
// themed() 被循环调用,每次循环其 $map 值不一样
@include themable {
#{$style}: themed('t-color-primary', 'color');
}
}
@mixin t-shadow {
// themed() 被循环调用,每次循环其 $map 值不一样
@include themable {
box-shadow: themed('t-shadow', 'shadow');
}
}
@mixin t-border {
// themed() 被循环调用,每次循环其 $map 值不一样
@include themable {
border: themed('t-border', 'border');
}
}