vue项目实现换肤功能
实现动态主题切换
在Vue项目中实现换肤功能，可以通过CSS变量结合Vue的响应式特性完成。定义全局CSS变量存储主题颜色，通过修改这些变量实现主题切换。
/* 全局CSS变量定义 */
:root {
--primary-color: #409EFF;
--background-color: #f5f7fa;
}
.dark-theme {
--primary-color: #304156;
--background-color: #1f2d3d;
}主题状态管理
使用Vuex或Pinia管理当前主题状态，存储用户选择的主题偏好。创建theme模块存储当前主题名称和对应的样式变量。
// Pinia示例
import { defineStore } from 'pinia'
export const useThemeStore = defineStore('theme', {
state: () => ({
currentTheme: 'light'
}),
actions: {
toggleTheme() {
this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light'
document.documentElement.className = this.currentTheme + '-theme'
}
}
})动态切换CSS类
根据当前主题状态动态修改HTML元素的className，触发对应的CSS变量生效。在应用初始化时读取用户保存的主题偏好。
// main.js初始化
const themeStore = useThemeStore()
document.documentElement.className = themeStore.currentTheme + '-theme'组件中使用主题变量
在组件样式中使用CSS变量确保颜色值随主题变化。SCSS中需要通过var()函数引用变量。
<style scoped>
.button {
background-color: var(--primary-color);
color: white;
}
</style>持久化主题选择
使用localStorage保存用户选择的主题，避免刷新后重置。在主题切换时同步更新本地存储。
// 在toggleTheme action中添加
localStorage.setItem('theme', this.currentTheme)
// 初始化时读取
const savedTheme = localStorage.getItem('theme') || 'light'
this.currentTheme = savedTheme多主题扩展方案
对于需要支持多种主题的场景，可以创建主题配置文件。每个主题定义完整的颜色变量集合，切换时批量更新CSS变量。
// themes.js
export const themes = {
light: {
'--primary-color': '#409EFF',
'--background-color': '#f5f7fa'
},
dark: {
'--primary-color': '#304156',
'--background-color': '#1f2d3d'
}
}
// 切换主题时
function applyTheme(themeName) {
const theme = themes[themeName]
Object.keys(theme).forEach(key => {
document.documentElement.style.setProperty(key, theme[key])
})
}
