一、从需求出发：动态换肤的核心目标是什么？

假设我们正在开发一个后台管理系统，用户要求支持 “白天模式” 和 “黑夜模式” 切换，且能实时生效。用 Vue3 + ElementUI 实现时，看似可以用 Vuex 直接管理颜色变量：

<!-- 看似合理的方案 -->
<template>
  <div :style="{ backgroundColor: $store.state.theme.bgColor }">
    <el-button type="primary">按钮</el-button>
  </div>
</template>

但当主题色变化时，你发现 ElementUI 组件的颜色并未更新，且页面性能大幅下降。为什么？

---

二、问题拆解：Vuex 管理颜色的局限性

1. 性能陷阱：响应式更新的代价

• Vue 响应式原理：每次修改 Vuex 中的颜色变量，所有用到该变量的组件都会触发 rerender。
• 大规模场景灾难：若页面有 100 个组件使用 $store.state.theme.primaryColor，换肤时会产生 100 次虚拟 DOM 计算。

2. 样式穿透失效：第三方组件的困局

• ElementUI 的样式隔离：其组件样式通过独立的 <style> 标签加载，且编译后的 CSS 使用固定变量名（如 var(--el-color-primary)）。
• Vuex 变量的局限：:style 绑定只能修改 当前组件内联样式，无法覆盖 ElementUI 内部样式。

---

三、破局关键：CSS 变量的浏览器级优化

1. CSS 变量的优势

// 一次操作，全局生效
document.documentElement.style.setProperty('--el-color-primary', '#FF0000');

• 零渲染开销：浏览器直接更新样式，不触发组件渲染。
• 样式穿透能力：修改 :root 的 CSS 变量，所有子元素（包括第三方组件）自动继承。

2. 正确协作模式：Vuex + CSS 变量

角色	职责	数据流
Vuex/Pinia	管理主题名称、持久化配置	用户操作 → 保存配置
CSS 变量	实际生效的样式	配置 → 更新 CSS 变量

四、正确实现：Vue3 + ElementUI 动态换肤

1. 定义主题配置

// src/constants/themes.js
export const THEMES = {
  light: {
    '--el-color-primary': '#409EFF',
    '--el-bg-color': '#ffffff'
  },
  dark: {
    '--el-color-primary': '#177ddc',
    '--el-bg-color': '#141414'
  }
};

 2. 主题切换逻辑

// src/utils/theme.js
export function applyTheme(themeName) {
  const theme = THEMES[themeName];
  // 遍历主题变量，更新到根元素
  Object.entries(theme).forEach(([key, value]) => {
    document.documentElement.style.setProperty(key, value);
  });
  // 可选：保存到 localStorage 或 Vuex
  localStorage.setItem('theme', themeName);
}

3. 集成 ElementUI 主题 

// main.js
import { applyTheme } from '@/utils/theme';

// 初始化时加载默认主题
applyTheme(localStorage.getItem('theme') || 'light');

 4. 在组件中使用 CSS 变量

<template>
  <!-- 直接使用 CSS 变量，无需访问 Vuex -->
  <div class="header">
    <el-button type="primary">按钮</el-button>
  </div>
</template>

<style scoped>
.header {
  background-color: var(--el-bg-color);
}
</style>

 五、性能对比：CSS 变量 vs Vuex 响应式

指标	CSS 变量方案	Vuex 响应式方案
组件渲染次数	0 次	N 次（所有相关组件）
样式更新速度	毫秒级	100ms+（随组件数增加）
第三方库兼容性	✅ 完美支持	❌ 无法覆盖内部样式

六、常见问题解答

1. 为什么不用 SCSS 变量？

• SCSS 变量在编译后会被替换为固定值，无法动态修改。CSS 变量具有运行时特性。

2. 需要兼容 IE11 怎么办？

• 回退方案：在编译时通过 Webpack 插件（如 postcss-custom-properties）将 CSS 变量替换为固定值，但会失去动态性。

3. 如何实现主题持久化？

• 将主题名称（如 'dark'）而非颜色值保存到 localStorage，初始化时重新应用。

---

七、总结

在动态换肤场景中，Vuex 应管理“该显示什么主题”，而 CSS 变量负责“如何显示这个主题”。两者的分工合作，既能利用 Vue 的响应式状态管理，又能通过浏览器原生机制实现高效样式更新，是兼顾性能与可维护性的最佳实践。

扩展思考：如何结合 CSS 变量和 SCSS 实现企业级主题系统？答案是通过 SCSS 生成多套 CSS 变量，动态加载不同主题文件。这在超大型项目（如 SaaS 平台）中尤为常见。

原文链接：https://juejin.cn/post/7477540557780713526