直接改:root变量可动态换肤，但必须同步设置--bs-primary、--bs-primary-rgb等完整链式变量，且.bg-primary等工具类不响应变量，因其为编译时硬编码。
直接改 :root 里的 --bs-* 变量就能动态换肤，但必须同步设置所有链式变量（如 --bs-primary-rgb），且不能只靠修改变量就指望所有组件响应——Bootstrap 5.3+ 的工具类（如 .bg-primary、.text-primary）压根不读这些变量，它们是编译时写死的。
为什么 document.documentElement.style.setProperty('--bs-primary', '#6f42c1') 后部分组件没变色
常见现象是按钮和警告框变了，但 .alert-primary 背景仍白、.tooltip 箭头还是蓝。这不是 JS 执行失败，而是漏设了派生变量：
-
--bs-primary-rgb必须手动提供，格式为"111, 66, 193"（不是十六进制，也不能四舍五入）；rgba(var(--bs-primary-rgb), .1)这类写法会直接 fallback 到默认值 -
--bs-primary-text-emphasis和--bs-primary-border-subtle在 5.3+ 中也被多处引用，漏掉会导致文字对比度异常或边框消失 - Tooltip、Toast、Offcanvas 等组件依赖独立变量（如
--bs-tooltip-bg），它们不继承--bs-primary，得单独覆盖 - 检查开发者工具的
:root节点，确认所有目标变量都已更新，而非被后续某个<style></style>覆盖
如何确保自定义变量在运行时真正生效
加载顺序和作用域错误是失效主因，尤其在构建工具中容易被忽略：
- 变量必须声明在
bootstrap.min.css之后，最稳妥方式是把<style id="theme-styles">放在<link rel="stylesheet" href="bootstrap.min.css">正下方 - 不要在组件内用
import './custom.css'（CRA/Vite 中 CSS 注入顺序不可控），改用public/index.html内联或全局 CSS 文件，并确保 import 顺序 - 避免写成
.btn { --bs-primary: #6f42c1 }—— CSS 变量作用域是继承的，:root才能保证全局生效 -
!important对变量声明无效：--bs-primary: red !important会让整行标为 invalid
哪些组件真能响应 CSS 变量，哪些不能
别假设所有带 -primary 的 class 都会变。Bootstrap 5.3+ 是渐进适配，关键看源码里是否用了 var(--bs-*)：
立即学习“前端免费学习笔记（深入）”；
- ✅ 响应变量的：
.btn-primary（背景）、.form-control:focus（边框）、.tooltip（背景/箭头）、.alert（边框/文字，仅当用.alert-primary且版本 ≥5.3.2） - ❌ 不响应变量的：
.bg-primary、.text-primary、.border-primary—— 它们仍是编译时生成的硬编码规则，改--bs-primary完全无效 - ⚠️ 半响应的：
.btn-outline-primary依赖--bs-btn-color和--bs-btn-border-color，但若你只动--bs-primary，它不会自动更新 - 第三方组件（如 Bootstrap Icons、某些表单校验插件）完全不读任何
--bs-*变量
动态换肤必须补全的最小变量集
想让多数基础组件视觉一致，至少要批量设置以下变量（缺一不可）：
-
--bs-primary+--bs-primary-rgb+--bs-primary-text-emphasis -
--bs-body-bg+--bs-body-color+--bs-emphasis-color -
--bs-border-color+--bs-border-color-translucent -
--bs-tooltip-bg+--bs-tooltip-color+--bs-tooltip-arrow-color - 深色模式下还需在
[data-bs-theme="dark"]选择器内重定义全部上述变量
变量名必须严格匹配 Bootstrap 5.3+ 规范（比如是 --bs-primary，不是 --primary 或 --bs-color-primary），拼错一个，对应组件就会“掉色”。
