vue怎么实现换肤功能
Vue 实现换肤功能的常见方法
动态切换 CSS 变量
在 :root 或组件中定义 CSS 变量，通过 JavaScript 动态修改变量值实现换肤。
:root {
--primary-color: #42b983;
--bg-color: #ffffff;
}
.dark-theme {
--primary-color: #34495e;
--bg-color: #2c3e50;
}// 切换主题
document.documentElement.classList.toggle('dark-theme');使用 SCSS/LESS 变量配合动态类名
通过预处理器变量和动态类名切换主题样式。
$themes: (
light: (primary: #42b983, bg: #fff),
dark: (primary: #34495e, bg: #2c3e50)
);
@mixin theme($property, $key) {
@each $theme, $map in $themes {
.#{$theme}-theme & {
#{$property}: map-get($map, $key);
}
}
}// 切换类名
document.body.className = 'dark-theme';通过 Vuex 或 Pinia 管理主题状态
全局状态管理工具存储当前主题，组件监听状态变化动态更新样式。
// store 示例（Pinia）
export const useThemeStore = defineStore('theme', {
state: () => ({ currentTheme: 'light' }),
actions: {
toggleTheme() {
this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
}
}
});动态加载外部样式文件
通过 link 标签动态切换不同主题的 CSS 文件。
function loadTheme(themeName) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = `/themes/${themeName}.css`;
document.head.appendChild(link);
}Element UI 等库的内置换肤方案
UI 库如 Element Plus 提供主题切换工具，可通过 useDark 或在线主题生成器实现。
import { useDark } from '@vueuse/core';
const isDark = useDark();实现注意事项
- 性能优化：避免频繁重绘，优先使用 CSS 变量而非直接修改样式。
- 持久化存储：通过
localStorage保存用户选择的主题。 - 无障碍适配：确保主题切换不影响可访问性（如对比度）。
