目录
前言
因为涉及到除了ui库以外的样式需要配置两个风格或者更多的颜色,所以有了这个方案的出现。
1、新建类名
首先在style找到element这个文件夹,在base-variable.scss里,我直接新建了两个类名,浅色与深色(项目里只需要用到这两个主题色)
2、定义变量
在这两个类名里,写的颜色变量一定要一致,
遵循scss规则,在两个类名里,定义颜色变量以后,再次定义一个以--开头的颜色变量,这个就是我们后面在vue文件里需要用到的颜色变量,
3、使用
4、关于切换主题的逻辑
这是写在一个js文件里的,然后,需要啥就用啥。
// 存储值
function saveStorage(theme) {
window.sessionStorage.setItem('theme', theme);
toggleClass(document.body,`custom-${theme}`)
}
// 获取值
function getTheme() {
let theme = window.sessionStorage.getItem('theme') || '52ffff';
console.log(theme, 'theme')
toggleClass(document.body,`custom-${theme}`)
}
function toggleClass(element, className) {
if (!element || !className) {
return;
}
element.className = className;
}
export { saveStorage,getTheme,toggleClass }
总结
希望能帮助到你!