vue实现换肤功能
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
}