只设 --bs-primary 不足以保证一致性，必须同步定义整套配套变量，否则按钮悬停、边框、文字强调色会回退默认值或显示异常；Bootstrap 5 组件依赖 --bs-primary-rgb、--bs-primary-text-emphasis、--bs-primary-border-subtle 等衍生变量，缺一不可。
只改 --bs-primary 不足以保证一致性，必须同步定义整套配套变量，否则按钮悬停、边框、文字强调色会回退默认值或显示异常。
为什么只设 --bs-primary 会导致颜色错乱
Bootstrap 5 的组件不是直接读取 --bs-primary，而是用它推导出多个状态相关变量：
-
--bs-primary-rgb用于rgba(var(--bs-primary-rgb), .1)这类透明背景，漏设则悬停色失效 -
--bs-primary-text-emphasis控制卡片标题、徽章文字是否够黑/够白，不设可能导致浅色背景上文字看不清 -
--bs-primary-border-subtle决定边框和分隔线颜色，缺失时.border-primary可能变灰或回退蓝色 - 所有这些变量名严格匹配，
--bs-primary-rgb少个后缀、多空格、带括号都会让 CSS 解析失败
如何安全覆盖整套主色变量链
必须在 :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;
}
- 变量值必须是纯数字三元组（如
74, 111, 165），不能写成rgb(74, 111, 165)或加单位 - 如果项目启用深色模式，必须额外在
[data-bs-theme="dark"]下重写整套变量，CSS 变量不会自动反转 - 自定义 CSS 文件必须加载在 Bootstrap 官方 CSS 之后，否则变量被忽略
哪些组件真正响应 --bs-primary 系列变量
仅限明确使用 CSS 变量的组件（Bootstrap 5.2+）：
立即学习“前端免费学习笔记（深入）”；
- 按钮：
.btn-primary背景、.btn-outline-primary边框与文字（需同时设--bs-btn-border-color和--bs-btn-color） - 表单：
.form-control:focus、.input-group-text - 警告框、徽章、进度条、工具提示（
--bs-tooltip-bg）、链接类（.link-primary） - 不响应的：所有
.text-primary、.bg-primary工具类——它们是 Sass 编译时生成的静态类，不读 CSS 变量 - 第三方组件（如 Bootstrap Icons、某些封装表单控件）仍硬编码 Sass 值，不会响应变化
局部主题切换比全局更可控
避免污染整个页面，推荐加作用域类：
.my-theme {
--bs-primary: #059669;
--bs-primary-rgb: 5, 150, 105;
--bs-primary-text-emphasis: #164e3b;
--bs-primary-bg-subtle: #e6fff7;
--bs-primary-border-subtle: #a7f3d0;
}
- 给容器加
my-theme类即可生效，不影响其他区域 - 但要注意：作用域内仍需补全全部衍生变量，
.my-theme .btn-primary:hover同样依赖--bs-primary-rgb - 不要试图用
!important强行覆盖.btn-primary——它会破坏焦点状态、键盘可访问性，且无法同步更新:hover和:focus颜色逻辑
最容易被忽略的不是变量怎么写，而是构建流程本身：你写的 --bs-primary 如果没加载在 Bootstrap CSS 之后，或者没覆盖到所有配套变量，那它就只是浏览器里看不见的一行注释。
