vue3切换theme功能
切换主题,老生常谈。反正我是第一次弄,还挺巧妙
我的实现方式是通过:root
的修改,来一键换色
:root {
// 主题色
--ry-primary-color: #ff9c00;
// layout部分
--ry-header-height: 60px;
--ry-logo-color: #5d5d5d;
--ry-logo-background-color: #fff;
// element主题色修改
--el-color-primary: var(--ry-primary-color);
}
接着在.ts文件里设置切换后的主题色,后面再用逻辑把设置的值赋值到css里
export interface Color {
primary: {
color: String
}
logo: {
color: string
backgroundColor: string
}
}
interface Style {
light: Color
dark: Color
}
export const style: Style = {
light: {
primary: {
color: '#ff9c00'
},
logo: {
color: '#5d5d5d',
backgroundColor: '#fff'
}
},
dark: {
primary: {
color: '#282724'
},
logo: {
color: '#fff',
backgroundColor: '#2a2a2a'
}
}
}
重点来了,切换theme逻辑
changeTheme() {
this.theme = this.theme === 'light' ? 'dark' : 'light'
const userTheme: Color = style[this.theme]
const root = document.documentElement
for (let i in userTheme) {
const item: any = userTheme[i as keyof Color]
for (let j in item) {
const cssVarName =
'--ry-' + i + '-' + j.replace(/([A-Z])/g, '-$1').toLowerCase()
root.style.setProperty(cssVarName, item[j])
}
}
}
我这里是只设置了light和dark主题,如果主题多了,可以通过传参完成,key要和上面设置的style的key对应上。
通过对对象的遍历,key拼接-
,再对小驼峰命名替换为-
拼接,最后放到:root里面进行整体样式重置