vue实现换肤功能

alanwhy

关注

阅读 52

2023-11-01

1、使用scss定义几种需要进行换肤的颜色,例如:

.font-color-theme{
	[color-theme="black"] & {
		color: #000
	}
	[color-theme="white"] & {
		color: #fff
	}
}

2、使用以下代码控制变化;

 	let colorType = localStorage.getItem('__color_theme__') || 'black';
    colorType = colorType == 'black' ? 'white' : 'black'
    document.documentElement.setAttribute('color-theme', colorType);
    localStorage.setItem('__color_theme__', colorType);

3、注意点!!!

如果想要让样式在css里面生效,例如改变底部tabbar的颜色,就需要使用@include,以vant的tabbar为例,其他按钮等样式同理

.van-tabbar-item--active{
	@include font-color-theme
}

精彩评论(0)

0 0 举报