HTML——
<a @click="change(type)">
<img class="pf-img" src="../../assets/pf.png" alt="" />
</a>
return——
type: 'dark',
JS——
/*点击改变主题样式*/
change(theme) {
if (this.type == 'dark') {
document.documentElement.setAttribute("data-theme", 'light');
this.type = 'light'
console.log('改变为白色主题')
} else {
document.documentElement.setAttribute("data-theme", 'dark');
this.type = 'dark'
console.log('改变为深色主题')
}
},
CSS——
<style lang="scss" scoped>
@import "./public/static/sass/_handle.scss";
</style>
public——CSS——
//引入
@import "./public/static/sass/_handle.scss";
//一些页面的样式
public——SASS——(_handle.scss)
@import "../../../public/static/scss/_themes.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) {
@return map-get($theme-map, $key);
}
//例子——
//获取字体颜色
@mixin font_color($color) {
@include themeify {
color: themed($color)!important;
}
}
//获取边框颜色
@mixin border_color($color) {
@include themeify {
border-color: themed($color)!important;
}
}
//获取背景颜色
@mixin background_color($color) {
@include themeify {
background-color: themed($color)!important;
}
}
//获取中间bg背景图
@mixin background_imagebody-box($image) {
@include themeify {
background-image: themed($image)!important;
}
}
//background_imagebody-box,是自己定义的名称,来自开头引入的( _themes.scss)
public——SCSS——(_themes.scss)
$themes: (
light: (
//例子——
font_colorel-pager-active1: #ffffff,
background_colorcenterTable:#F1F0FE,),
dark: (
//例子——
font_colorel-pager-active1: #000000,
background_colorcenterTable:#020E20, )
);
最后再在css里需要的地方写——
@include background-color("background_colorcenterTable");