bootstrap 5.3+ 中，.btn-primary、.alert-primary、.form-control:focus、.tooltip 等组件响应 --bs-primary；但 .text-primary 和 .bg-primary 不响应，仍依赖编译时 class 规则，且变量不可用于 @media 或伪元素 content 属性。
直接用 CSS 变量改 --bs-primary 等值能快速换色，但只对 Bootstrap 5.3+ 原生适配的组件生效；旧版组件、第三方扩展、伪元素和媒体查询里根本用不了，别指望它替代 Sass 编译时定制。
哪些组件真能响应 --bs-primary？
Bootstrap 5.3 开始，.btn-primary、.alert-primary、.form-control:focus（靠 --bs-border-color）、.tooltip（靠 --bs-tooltip-bg）等已显式使用变量。但以下不响应：
-
.text-primary和.bg-primary仍走编译时生成的 class 规则，不是靠var(--bs-primary) - 所有基于
$primary-rgb计算的透明背景（如rgba(var(--bs-primary-rgb), .1)）需要你手动补全--bs-primary-rgb，否则直接失效 - 第三方 UI 库（如 Bootstrap Icons、某些表单验证插件）完全不读这些变量
--bs-primary 能不能写在 @media 或 ::before 里？
不能。CSS 变量不能用于媒体查询条件或伪元素 content 属性：
-
@media (prefers-color-scheme: var(--bs-dark-mode))→ 语法错误，浏览器直接忽略整条规则 -
::before { content: var(--bs-title); }→ 页面上真会显示字符串var(--bs-title)，不是变量值 -
color: darken(var(--bs-primary), 10%)→ CSS 函数无法解析变量，得提前算好值或换 JS 注入
动态切换主题时，为什么按钮变了但 Tooltip 还是旧色？
因为 .tooltip 的样式依赖多个变量，只改 --bs-primary 不够：
- 必须同步设置
--bs-tooltip-bg、--bs-tooltip-color、--bs-tooltip-arrow-color，三者缺一不可 - 如果用了深色模式
data-bs-theme="dark"，还得在[data-bs-theme="dark"]下单独重定义这些变量 - 已初始化的 Tooltip 实例不会自动重绘，得手动调用
tooltip.dispose()再new Tooltip()
真正要长期维护多主题，得把整套变量链（主色、RGB、文本强调色、边框浅色、背景浅色）打包成对象，用 JS 注入 <style id="theme-styles"></style>，而不是零敲碎打改单个变量——漏掉任意一个，某个角落的边框或文字就会突然“掉色”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
