改 --bs-primary 后文字颜色不变，是因为 .text-primary 等工具类是 sass 编译时硬编码的，未读取 css 变量；需同步更新 --bs-primary-rgb、--bs-primary-text-emphasis 等配套变量，否则 ui 多处“掉色”。
直接改 --bs-primary 为什么按钮变了但文字还是旧色？
因为 .text-primary 和 .bg-primary 这类工具类不读 CSS 变量，它们是 Sass 编译时生成的硬编码规则，比如 .text-primary { color: #0d6efd; }。改 --bs-primary 只影响明确用了 var(--bs-primary) 的组件，如 .btn-primary、.alert-primary、.form-control:focus。
常见错误现象：你在 :root 里设了 --bs-primary: #4f46e5，按钮颜色变了，但 <p class="text-primary">这段文字</p> 没变——这就是典型“变量没覆盖到工具类”的表现。
- 必须单独覆盖工具类：
.text-primary { color: #4f46e5 !important; }（注意：不是推荐做法，见下一条） - 更稳妥的做法是用高特异性选择器，比如
.my-app .text-primary { color: #4f46e5; }，避免全局污染 - 如果项目允许，优先走 Sass 重编译路径，让
.text-primary真正响应主题变量
--bs-primary-rgb 必须手动同步，否则透明背景失效
Bootstrap 很多透明态样式依赖 rgba(var(--bs-primary-rgb), .1) 这种写法。但 --bs-primary-rgb 不会自动从 --bs-primary 计算出来——它得你手动提供，格式是 "79, 70, 229"（对应 #4f46e5）。
漏掉这一步的后果：卡片悬停浅色背景、按钮禁用态半透效果、表单焦点环淡色边框全部消失或变成黑色/白色。
- RGB 值可用在线工具转换，或用 JS 动态计算（但静态站点建议手写）
- 配套变量一个都不能少：
--bs-primary-text-emphasis（深色文字）、--bs-primary-border-subtle（浅边框），否则.border-primary或.card边框会出错 - 别只改
--bs-primary就以为万事大吉——变量链断一环，UI 就有一块“掉色”
Tooltip 颜色要三变量齐改，箭头色最容易被忽略
.tooltip 的样式由三个变量共同控制：--bs-tooltip-bg、--bs-tooltip-color、--bs-tooltip-arrow-color。只改前两个，箭头还是默认蓝灰色，视觉上明显割裂。
而且 tooltip 浮层是动态 append 到 下的，所以变量必须作用于 body 或全局 :root，局部 :root 无效。
- 正确写法：
body { --bs-tooltip-bg: #4a5568; --bs-tooltip-color: #e2e8f0; --bs-tooltip-arrow-color: #4a5568; } - 别用
data-bs-custom-class去覆盖颜色——那得重写整套.tooltip-inner规则，容易漏 padding、border-radius、box-shadow - 深色模式下需在
[data-bs-theme="dark"] body下单独定义这组变量，否则 tooltip 在暗色背景下仍显示浅色背景
动态切换主题时，style 标签注入比逐个 document.documentElement.style.setProperty 更可靠
直接用 JS 改单个变量，比如 document.documentElement.style.setProperty('--bs-primary', '#059669')，看似简单，但无法保证所有配套变量（--bs-primary-rgb、--bs-primary-text-emphasis 等）同步更新，极易引发状态错乱。
真正稳定的做法是把整套变量打包成字符串，一次性注入 <style id="theme-styles"></style>：
const themes = {
ocean: {
'--bs-primary': '#20c997',
'--bs-primary-rgb': '32, 201, 151',
'--bs-primary-text-emphasis': '#0c583f',
'--bs-primary-border-subtle': '#b2f0dd'
}
};
function applyTheme(name) {
const styleEl = document.getElementById('theme-styles');
const vars = Object.entries(themes[name])
.map(([k, v]) => `${k}: ${v}`)
.join('; ');
styleEl.textContent = `:root { ${vars} }`;
}
这种方式能确保变量原子性更新，也方便回滚和调试。但要注意：每次调用都应完整覆盖所有主题变量，不能只补几个——否则旧值残留，UI 就会混搭出奇怪效果。
最常被忽略的是变量链完整性。你以为改了主色就完事了，其实按钮、tooltip、表单焦点、卡片边框、文字强调色背后各自依赖不同变量，漏掉任意一个，某个角落的 UI 就会突然“掉色”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
