0
点赞
收藏
分享

微信扫一扫

vue实现换肤功能

alanwhy 2023-11-01 阅读 51

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
}
举报

相关推荐

Vue换肤主题

vue less 换肤

【无标题】vue换肤

vue 一键换肤

Vue实现登录功能

0 条评论