vue主题系统实现
Vue 主题系统实现方法
动态 CSS 变量
通过 CSS 变量结合 Vue 的响应式特性实现主题切换。在根元素（如 :root）或组件中定义 CSS 变量，通过修改变量值实现主题变化。
:root {
--primary-color: #42b983;
--bg-color: #ffffff;
}
.dark-theme {
--primary-color: #2c3e50;
--bg-color: #1a1a1a;
}// 在 Vue 组件中切换主题
methods: {
toggleTheme() {
document.documentElement.classList.toggle('dark-theme');
}
}使用 Vuex 或 Pinia 管理主题状态
通过状态管理工具集中管理当前主题，确保主题状态在应用内共享。
// Pinia 示例
import { defineStore } from 'pinia';
export const useThemeStore = defineStore('theme', {
state: () => ({ isDark: false }),
actions: {
toggleTheme() {
this.isDark = !this.isDark;
document.documentElement.classList.toggle('dark-theme', this.isDark);
}
}
});SCSS/Less 预处理器支持
结合预处理器动态生成主题样式，通过变量注入实现多主题。
$themes: (
light: (
primary: #42b983,
bg: #ffffff
),
dark: (
primary: #2c3e50,
bg: #1a1a1a
)
);
@mixin theme($property, $key) {
@each $theme, $colors in $themes {
.#{$theme}-theme & {
#{$property}: map-get($colors, $key);
}
}
}插件化实现（如 Vuetify 主题系统）
参考现有 UI 库的实现方式，通过插件机制提供主题注册和切换能力。
// 插件示例
const ThemePlugin = {
install(app, options) {
app.provide('currentTheme', ref('light'));
app.config.globalProperties.$changeTheme = (theme) => {
app._context.provides.currentTheme.value = theme;
};
}
};持久化存储
通过 localStorage 或 cookie 保存用户选择的主题，实现页面刷新后主题不丢失。
// 持久化逻辑
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.classList.add(`${savedTheme}-theme`);组件级主题隔离
通过 provide/inject 实现组件树的主题继承与覆盖，允许局部主题定制。
// 提供主题上下文
export const ThemeSymbol = Symbol();
export default {
setup() {
const theme = ref('light');
provide(ThemeSymbol, theme);
return { theme };
}
}动态样式加载
通过动态加载外部 CSS 文件实现完整主题包切换，适合大型主题系统。
function loadThemeCSS(themeName) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = `/themes/${themeName}.css`;
document.head.appendChild(link);
}注意事项
- 性能优化：避免频繁的 DOM 操作，优先使用 CSS 变量而非类名切换
- 无障碍支持：确保主题切换不影响内容可读性，满足 WCAG 对比度标准
- 服务端渲染：SSR 场景下需处理主题状态同步问题
- 过渡动画：为主题切换添加 CSS 过渡效果提升用户体验
