vue实现换肤
使用 CSS 变量实现换肤
在 Vue 项目中，可以通过 CSS 变量（Custom Properties）动态切换主题色。CSS 变量可以在运行时修改，适合实现换肤功能。
定义全局 CSS 变量：
:root {
--primary-color: #42b983;
--secondary-color: #35495e;
}在组件中使用 CSS 变量：
.button {
background-color: var(--primary-color);
color: var(--secondary-color);
}在 Vue 中动态修改 CSS 变量：
document.documentElement.style.setProperty('--primary-color', newColor);使用 SCSS 变量与动态类名
结合 SCSS 和动态类名切换主题，适合需要预定义多套主题的场景。
定义多套主题的 SCSS 变量：
$themes: (
light: (
primary-color: #42b983,
secondary-color: #35495e,
),
dark: (
primary-color: #1e1e1e,
secondary-color: #ffffff,
)
);创建混入（mixin）来应用主题：
@mixin theme($property, $key, $theme-map: $themes) {
@each $theme-name, $theme-colors in $theme-map {
.#{$theme-name}-theme & {
#{$property}: map-get($theme-colors, $key);
}
}
}在组件中使用混入：
.button {
@include theme('background-color', 'primary-color');
@include theme('color', 'secondary-color');
}在 Vue 中切换主题类名：
this.$root.$el.className = 'dark-theme'; // 切换到暗色主题使用 Vuex 管理主题状态
对于大型应用，可以使用 Vuex 集中管理主题状态，确保主题切换的一致性。
定义 Vuex store：
const store = new Vuex.Store({
state: {
currentTheme: 'light'
},
mutations: {
setTheme(state, themeName) {
state.currentTheme = themeName;
}
}
});在组件中切换主题：
this.$store.commit('setTheme', 'dark');监听主题变化并应用到根元素：
watch: {
'$store.state.currentTheme'(newVal) {
document.documentElement.className = `${newVal}-theme`;
}
}使用第三方库实现换肤
对于更复杂的换肤需求，可以考虑使用专门的主题切换库，如 vue-theme-switcher 或 element-ui 的主题定制功能。
安装 vue-theme-switcher：
npm install vue-theme-switcher基本用法：
import Vue from 'vue';
import ThemeSwitcher from 'vue-theme-switcher';
Vue.use(ThemeSwitcher, {
themes: {
light: {
primary: '#42b983'
},
dark: {
primary: '#1e1e1e'
}
}
});在组件中切换主题：
this.$theme.set('dark');持久化主题选择
为了记住用户选择的主题，可以将主题偏好保存到 localStorage 中。
保存主题选择：
localStorage.setItem('userTheme', themeName);应用保存的主题：
const savedTheme = localStorage.getItem('userTheme') || 'light';
this.$store.commit('setTheme', savedTheme);以上方法可以根据项目需求选择或组合使用，实现灵活的主题切换功能。
