真正响应css变量的组件是.btn-primary、.alert-primary、.form-control:focus和.tooltip，需同步设置--bs-primary、--bs-primary-rgb等6个变量及--bs-body-bg与--bs-body-color成对定义，否则局部掉色；.text-primary和.bg-primary不响应变量。
因为 Bootstrap 5.3+ 把核心颜色变量（如 --bs-primary）直接暴露在 :root 中，且关键组件（.btn-primary、.alert-primary、.tooltip 等）的样式声明里明确用了 var(--bs-primary) —— 改变量值，CSS 引擎立刻重算并渲染，无需 JS 介入或页面刷新。
哪些组件真能响应 CSS 变量？
不是所有带 -primary 的类都响应变量。真正靠变量驱动的是：
-
.btn-primary：依赖--bs-primary和--bs-primary-rgb -
.alert-primary：同上，还用rgba(var(--bs-primary-rgb), .1)做背景淡色 -
.form-control:focus：靠--bs-border-color（它又继承自--bs-primary） -
.tooltip：需同时设置--bs-tooltip-bg、--bs-tooltip-color、--bs-tooltip-arrow-color，缺一不可
.text-primary 和 .bg-primary 不响应变量——它们是编译时生成的静态 class，仍走原始 Sass 规则。
为什么只改 --bs-primary 会出错？
Bootstrap 内部样式链是“多变量协同”，漏掉任意一个，就会局部掉色。常见失效场景：
- 按钮变色了，但
.alert-primary背景还是默认蓝：没定义--bs-primary-rgb，导致rgba(var(--bs-primary-rgb), .1)fallback 到浏览器默认值 - Tooltip 边框发灰：只设了
--bs-tooltip-bg，漏了--bs-tooltip-arrow-color - 深色模式下文字看不清：改了
--bs-body-bg却没同步--bs-body-color，.text-body就沿用浅色值
最低限度必须成对定义的变量有 6 个：--bs-primary、--bs-primary-rgb、--bs-primary-text-emphasis、--bs-primary-bg-subtle、--bs-primary-border-subtle、--bs-body-bg + --bs-body-color（必须同时设）。
如何避免预览闪屏和重绘抖动？
频繁切换主题时，直接调 document.documentElement.style.setProperty() 会触发全量重绘，编辑器卡顿明显。更稳的做法是：
- 把每个主题定义为纯 JS 对象（如
themes.ocean），转成完整:root { ... }字符串 - 用
<style id="theme-styles"></style>注入，每次切换只替换其textContent，不操作cssText或清空整个<style></style> - 给关键容器加
transition: background-color 0.2s, color 0.2s，但避开box-shadow和border动画（兼容性差）
变量拼写错一位（比如 --bs-priamry）、嵌套 var()（rgba(var(--r), ...)）、或把变量写在组件选择器里而非 :root，都会静默失效——控制台不报错，颜色就是不变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
