最轻量、最稳定、最易维护的主题定制方式是直接在:root中重设组件库依赖的CSS变量，需确保主题文件在组件库CSS之前加载，通过class切换或JS动态修改实现运行时换肤，并统一管理语义化设计令牌。
直接用 :root 重设组件库依赖的 CSS 变量，是最轻量、最稳定、也最易维护的主题定制方式。其他绕路方案（比如全局覆盖类名、:global()、硬写 SCSS 变量）要么失效频繁，要么破坏作用域，要么无法运行时更新。
为什么必须在 :root 中定义变量？
CSS 变量的作用域是级联的，而主流组件库（Element Plus、Naive UI、Vant 4 等）都把默认值写在 :root 或其子选择器里。如果你在某个组件的 <style scoped> 里定义 --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。
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 常见变量命名有规律：
--el-color-*、--van-*、--nui-*，基本都带前缀 - 颜色变量常分层级：
--el-color-primary（主色）、--el-color-primary-light-5（主色浅 5 号），改基础色会自动影响派生色 - 非颜色变量也重要：
--el-font-size-base、--el-border-radius-base、--van-cell-padding，它们决定整体密度和节奏
如何支持运行时换肤而不闪屏？
关键不是“换”，而是“平滑过渡”。CSS 变量本身是即时生效的，但若页面已有渲染完成的元素，直接改 document.documentElement.style.setProperty 会导致部分样式重排卡顿或视觉跳变。
立即学习“前端免费学习笔记（深入）”；
- 给根元素加
transition: background-color, color, border-color 0.25s ease—— 仅对可动画属性有效，别滥用 - 避免在切换瞬间批量 setProperty 多个变量，改用 CSS 类名切换（如
[data-theme="dark"]块）更可控 - 首次加载时从
localStorage读取主题后，**同步设置data-theme属性和 CSS 变量**，否则 SSR 或首屏会闪回默认主题 - 系统级暗色偏好要用
window.matchMedia('(prefers-color-scheme: dark)')监听，而不是只靠 JS 初始化一次
真正难的不是写几个 setProperty，而是让所有设计令牌（颜色、间距、阴影、动效时长）都通过变量暴露，并保持语义清晰、层级分明。一旦变量体系混乱，换肤就变成修 bug。所以别急着改色，先花十分钟理清 --brand-primary 和 --state-success 的边界在哪。
