确认组件库CSS变量名需查源码或文档：Element Plus在var.scss，Vant 4在ConfigProvider文档，Naive UI在variables.css；变量带固定前缀如--el-color-primary，改基础色可联动派生色，非颜色变量如--el-font-size-base同样关键。
直接在 :root 里改变量就能让组件库换肤，但前提是变量名对得上、加载顺序没错、且不破坏继承链——否则要么无效，要么全局串色。
怎么确认组件库用的CSS变量名？
别猜，查源码或文档。Element Plus 的变量定义在 element-plus/theme-chalk/src/common/var.scss；Vant 4 在 ConfigProvider 文档页明确列出全部 --van-* 变量；Naive UI 则集中在 node_modules/nuxt-ui/dist/index.css 或其 variables.css 文件里。
-
--el-color-primary、--van-primary-color、--nui-text-color这类带前缀的才是真名，直接写--color-primary大概率没用 - 颜色常分层级：
--el-color-primary-light-5是由--el-color-primary派生的，改基础色即可联动更新 - 非颜色变量也关键：
--el-font-size-base、--van-cell-padding控制密度，漏掉会导致主题“只变色不换形”
为什么改了 :root 变量，组件还是没反应？
最常见原因是加载顺序错了：你的主题 CSS 必须在组件库 CSS 之前 加载。比如在 main.ts 中，要先 import './assets/styles/theme.css'，再 import 'element-plus/dist/index.css'。
- Vue CLI 或 Vite 可能默认注入 base style，需检查它是否插在中间，覆盖了你的变量
- 如果用了
<style scoped></style>在组件里定义变量，它不会影响组件库内部元素——因为那些 DOM 不在你的作用域内 -
:root:root这类 hack 写法不可靠，Vant 4 官方已说明多数浏览器不支持
如何安全实现运行时局部换肤，不波及全局？
全局换肤用 :root + data-theme 类名切换最稳；但若只要某个卡片或表单独立换色，就得收束作用域——把变量挂到组件根容器上，而不是 :root。
立即学习“前端免费学习笔记（深入）”；
- 例如给
.card元素设.card { --card-bg: #fff; --card-border-radius: 8px; }，子元素用background-color: var(--card-bg)就只受它影响 - React/Vue 中可直接绑定内联 style：
style={{ '--card-bg': theme.bg }}，比 class 切换更可控 - 避免用
document.documentElement.style.setProperty()批量改多个变量，容易触发大面积重排；换成cardEl.style.setProperty()锁定范围
SSR 和首屏闪动怎么处理？
服务端必须同步注入变量值，否则客户端 hydration 前会按默认主题渲染一帧，再跳变成目标主题。
- HTML 模板里预设
<html data-theme="dark">，配合[data-theme="dark"] :root规则，避免白屏 - 首次加载时从
localStorage读主题后，要同步设置document.documentElement.setAttribute('data-theme', theme)，不能只改 CSS 变量 -
var(--x, #000)的 fallback 值必须是字面量，不能是表达式——CSS 不支持运行时计算
真正难的不是写对一个 setProperty，而是让所有组件都遵循同一套变量命名和作用域规则。一旦某处漏加前缀、或在错误层级声明变量，整个主题系统就会出现不可预测的覆盖或断链。
