Vue3如何实现主题切换功能？
- 内容介绍
- 文章标签
- 相关推荐
本文共计329个文字，预计阅读时间需要2分钟。
更改主题，老人常谈。我这是第一次拆，还不太巧。我的实现方式是通过：root 的修改，一键换色：root { // 主题色 --ry-primary-color: ; }
切换主题，老生常谈。反正我是第一次弄，还挺巧妙
我的实现方式是通过: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里面进行整体样式重置
本文共计329个文字，预计阅读时间需要2分钟。
更改主题，老人常谈。我这是第一次拆，还不太巧。我的实现方式是通过：root 的修改，一键换色：root { // 主题色 --ry-primary-color: ; }
切换主题，老生常谈。反正我是第一次弄，还挺巧妙
我的实现方式是通过: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里面进行整体样式重置