最稳妥方式是用 document.documentElement.style.setProperty() 批量动态注入CSS变量，配合语义化皮肤对象、nextTick防闪屏、fallback兜底及非scoped样式定义，确保全局响应式生效。
Vue中如何在根元素上注入动态CSS变量
直接在 :root 里写死变量值无法响应式切换皮肤，必须让变量值能随 Vue 响应式状态更新。最稳妥的方式是用 document.documentElement.style.setProperty() 批量写入，而不是靠 class 切换预定义的 CSS 文件。
常见错误是把变量写在组件 scoped style 里——scoped 会加属性选择器，:root 不受 scoped 影响，但组件内变量也无法被全局样式消费；另一类错误是用 v-bind 绑定到单个元素上，导致子组件拿不到继承值。
- 初始化时遍历皮肤配置对象，调用
document.documentElement.style.setProperty('--color-primary', '#409eff') - 皮肤切换时清空旧变量（可选）再重设，避免残留
- 变量名统一加前缀如
--theme-color-primary，避免和第三方库冲突 - 不要依赖
CSSStyleSheet.insertRule()动态插入规则，兼容性和性能都不如style.setProperty
如何让CSS变量在SFC中正确继承与使用
只要变量定义在 :root，所有元素默认继承，但 SFC 的 <style scoped> 会阻止部分继承行为：比如 color: var(--color-text) 能生效，但 background: linear-gradient(var(--color-primary), #fff) 在某些老版 Chrome 下可能失效——因为渐变函数对变量解析更严格。
- 在
<style>（非 scoped）中定义基础变量使用规则，例如body { color: var(--color-text); } - scoped style 中只用变量，不重新声明变量，例如
.btn { background-color: var(--color-primary); } - 避免在
@keyframes或@media内部直接引用未降级的变量，必要时用 JS 提前计算好 fallback 值 - 如果用了 CSS Modules，变量必须通过
:export导出并在 JS 中读取，不能直接在module类名上用var()
皮肤数据结构设计与运行时切换时机
皮肤不应只是颜色数组，而应是带语义的键值对对象。比如 { 'color-primary': '#409eff', 'color-bg': '#ffffff' } 比 ['#409eff', '#ffffff'] 更易维护、支持按需更新、也方便做深色模式自动推导。
立即学习“前端免费学习笔记（深入）”；
- 把皮肤配置存为纯对象（非 ref），用
const themes = { light: {...}, dark: {...} }管理 - 切换皮肤时，用
nextTick包裹变量设置逻辑，确保 DOM 更新完成后再注入，避免闪屏 - 服务端渲染（SSR）场景下，首次渲染需在
beforeMount阶段同步写入变量，否则首屏无样式 - 监听系统偏好（
prefers-color-scheme）时，用window.matchMedia订阅，别只靠一次判断
兼容性兜底与变量 fallback 写法
CSS 变量本身不支持 IE，但更重要的是：即使现代浏览器，var(--x, red) 的 fallback 只在变量未定义时生效，如果变量值是空字符串或 initial，fallback 不触发。这意味着皮肤切换中途若变量设为空，UI 就会断层。
- 所有
var()调用必须带 fallback，例如color: var(--color-text, #333) - fallback 值建议用最小可用集（如黑白灰、基础蓝），不要用另一个变量
- 对关键属性（如
background-color、border-color）做双重保障：先设 fallback，再用 JS 检查变量是否生效（getComputedStyle(document.body).getPropertyValue('--color-bg')） - 不要指望 PostCSS 插件（如
postcss-css-variables）解决运行时切换问题，它只处理构建时静态变量
真正难的不是设变量，而是确保从根节点到每个伪元素、每个 SVG fill、每个第三方组件内部样式，都真正接收到并响应了变量变化。很多“看起来切换了”其实是缓存或继承链断裂造成的假象。
