只改--bs-primary按钮悬停色仍是蓝色，因为Bootstrap 5组件依赖--bs-primary-rgb等整套变量协同计算状态色，漏设--bs-primary-rgb则rgba(var(--bs-primary-rgb), .1)回退默认值。
只改 --bs-primary 为什么按钮悬停色还是蓝色
因为 Bootstrap 5 组件不直接读取 --bs-primary，而是用它推导出一整套状态变量：--bs-primary-rgb 用于透明背景（如 rgba(var(--bs-primary-rgb), .1)），--bs-primary-text-emphasis 控制文字对比度，--bs-primary-border-subtle 决定边框和分隔线颜色。漏掉任意一个，对应状态就会回退默认值或显示异常——比如悬停时背景没变、徽章文字发灰、卡片边框仍是浅蓝。
:root 中声明变量必须一次性写全
顺序和格式都影响解析结果，必须严格按官方命名在 :root 中集中声明：
:root {
--bs-primary: #4a6fa5;
--bs-primary-rgb: 74, 111, 165;
--bs-primary-text-emphasis: #2c3e50;
--bs-primary-bg-subtle: #e8f0ff;
--bs-primary-border-subtle: #b8d0ff;
}
-
--bs-primary-rgb必须是纯数字三元组，不能带rgb()或单位 - 所有变量名必须完整匹配，少后缀、多空格、括号错位都会让 CSS 解析失败
- 自定义 CSS 文件必须加载在 Bootstrap 官方 CSS 之后，否则变量被忽略
深色模式下变量不会自动反转
Bootstrap 5.3+ 的 data-bs-theme="dark" 只切换明暗基调，不重算主题色。如果你的 --bs-primary 是深蓝，在暗背景下可能文字对比度不足。必须手动为深色上下文重写整套变量：
[data-bs-theme="dark"] {
--bs-primary: #6a7ebf;
--bs-primary-rgb: 106, 126, 191;
--bs-primary-text-emphasis: #e2e8f0;
--bs-primary-bg-subtle: #1e293b;
--bs-primary-border-subtle: #334155;
}
注意：这些值不是简单调亮/调暗，而是要确保在暗背景上文字可读、边框有足够区分度。
立即学习“前端免费学习笔记（深入）”；
哪些组件真能响应 CSS 变量，哪些只是“假装支持”
真正响应 --bs-primary 系列变量的，仅限 Bootstrap 5.2+ 明确使用 CSS 变量的组件：
- 按钮：
.btn-primary（背景）、.btn-outline-primary（需同时设--bs-btn-color和--bs-btn-border-color） - 表单：
.form-control:focus、.input-group-text - 徽章、进度条、工具提示（
--bs-tooltip-bg）、链接类（.link-primary）
但以下完全不响应：
-
.text-primary、.bg-primary等工具类——它们是 Sass 编译时生成的静态规则，CSS 变量改了也没用 - 第三方封装组件（如某些图标库、表单控件），仍硬编码原始 Sass 值
动态换肤时最容易踩坑的地方，就是以为改了变量就万事大吉，结果发现文字颜色没变、工具类失效、第三方组件还卡在默认蓝——得提前确认组件底层是否真走 CSS 变量路径。
