直接用document.documentElement.style.setProperty修改CSS变量可实现Element Plus主题色动态切换，但必须同步设置--el-color-primary及light-1至light-9、dark-1至dark-9全部衍生色，且作用域须为:root，否则按钮悬停、禁用等状态颜色不协调或失效。
直接用 document.documentElement.style.setProperty 修改变量
Element Plus 所有主题色都基于 CSS 变量，比如 --el-color-primary 控制主按钮色，--el-color-primary-light-3 控制 hover 色。运行时修改这些变量，组件会立即响应——前提是变量名拼写准确、作用域覆盖到位。
常见错误是只改了 --el-color-primary，但没同步生成并设置 9 级 light/dark 衍生色，导致按钮悬停、禁用、加载状态颜色不协调。
- 必须一次性设置全部衍生色：light-1 到 light-9、dark-1 到 dark-9，否则部分组件（如
el-input的 focus 边框、el-tag的 light 类型）会回退到默认蓝灰调 - 推荐用工具函数批量计算，例如
getLightColor('#409EFF', 0.3)生成浅色值，避免手动调色失衡 - 修改目标 DOM 必须是
document.documentElement（即<html>），设在body或某个容器上无效
--el-color-primary 改了但按钮没变色？检查这三点
最常踩的坑不是代码写错，而是变量没生效或被覆盖。打开 DevTools 的 Elements 面板，选中一个 el-button，看 computed 样式里 background-color 是否真的取自 var(--el-color-primary)。
- 确认 Element Plus 的 CSS 是通过
theme-chalk引入的（非 CDN 或打包后压缩 CSS），否则变量可能已被内联固化 - 检查是否有其他样式（比如全局
:root声明、SCSS@import后的覆盖）在你调用setProperty之后又重置了变量 - Vue 组件用了
scoped，但主题变量需全局生效，确保没把style标签加scoped属性
为什么不能只靠 @forward + SCSS 覆盖来动态换肤
SCSS 方案（如 @forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ...)）只在构建时生效。它生成的是静态 CSS 文件，无法响应运行时用户选择的颜色。
立即学习“前端免费学习笔记（深入）”；
- 适合品牌固定、发布前就确定主题色的场景（如 SaaS 多租户后台，每个租户一套 build）
- 若要支持用户实时切换主题，必须走 CSS 变量 + JS 动态注入路线，SCSS 方案只能作为兜底或首屏优化（预设几套主题，减少 runtime 计算）
- 注意：Vite 中若开启
css.preprocessOptions.sass.additionalData注入全局变量，仍属编译期行为，和 runtime 无关
暗黑模式下主题色要单独处理吗
要。Element Plus 的暗黑模式（html.dark）使用另一套独立变量，例如 .dark --el-color-primary 和 --el-color-primary 互不干扰。你不能指望改了根节点的 --el-color-primary 就自动影响暗色模式下的按钮。
- 切换暗色模式时，需同时更新两套变量：一套给
:root，一套给.dark选择器下的同名变量 - 更稳妥的做法是封装一个
applyTheme(theme, mode = 'light')函数，mode 为'light'或'dark'，分别操作不同作用域 - 别漏掉背景色变量，比如
--el-bg-color-page在暗色模式下需设为深灰，否则即使按钮变紫，页面仍是白底
MyCard 里写了 border-color: #409eff，它就不会随主题变色。这点容易被忽略，得统一替换成 var(--el-color-primary) 才算闭环。 
