最轻量、最稳定、最易维护的主题定制方式是直接在:root中重设组件库依赖的css变量，需确保主题文件在组件库css之前加载，通过class切换或js动态修改实现运行时换肤，并统一管理语义化设计令牌。
直接用 :root 重设组件库依赖的 CSS 变量，是最轻量、最稳定、也最易维护的主题定制方式。其他绕路方案（比如全局覆盖类名、:global()、硬写 SCSS 变量）要么失效频繁，要么破坏作用域，要么无法运行时更新。
为什么必须在 :root 中定义变量？
CSS 变量的作用域是级联的，而主流组件库（Element Plus、Naive UI、Vant 4 等）都把默认值写在 :root 或其子选择器里。如果你在某个组件的 <style scoped></style> 里定义 --el-color-primary，它根本不会影响到 el-button 内部——因为那个按钮渲染在组件外部 DOM 树中，不在你的 scoped 作用域内。
- 必须确保你的主题文件在组件库 CSS 之前 加载（例如
main.ts中先import './assets/styles/theme.css'，再import 'element-plus/dist/index.css'） - 不要用
:root:root这类 hack 权重提升写法——它不可靠，且 Vant 4 文档里提到的该用法实际在多数浏览器中不生效 - 检查是否被框架默认样式覆盖：Vue CLI 或 Vite 默认可能注入了 base style，需确认其加载顺序
--van-primary-color 和 --el-color-primary 这类变量怎么找？
别猜，直接查源码或官方文档。Element Plus 的所有变量定义在 element-plus/theme-chalk/src/common/var.scss；Vant 4 明确列出全部变量在 ConfigProvider 文档；Naive UI 则集中于 node_modules/nuxt-ui/dist/index.css 或其源码中的 variables.css。
