只改--bs-primary不够，因Bootstrap 5.3+组件依赖--bs-primary-rgb、--bs-primary-text-emphasis等6个变量协同生效，缺一即导致悬停、边框、文字强调色回退默认值或显示异常。
直接在 :root 里改 --bs-primary 是最轻量的起点，但只动它一个变量，90% 的按钮悬停、边框、文字强调色都会出错——因为 Bootstrap 5.3+ 的组件依赖一整套配套变量协同计算。
为什么只覆盖 --bs-primary 不够用
Bootstrap 的 .btn-primary:hover 背景是 rgba(var(--bs-primary-rgb), .1)，不是简单调暗 --bs-primary；.text-primary 在深色背景上能否看清，取决于 --bs-primary-text-emphasis 是否同步更新；而 .border-primary 的浅边框色来自 --bs-primary-border-subtle。漏掉任意一个，对应状态或组件就会回退到默认蓝色或显示异常。
-
--bs-primary-rgb必须是纯数字三元组（如37, 99, 235），不能带括号或单位，否则rgba()解析失败 -
--bs-primary-text-emphasis不是自动生成的，需手动设为满足 WCAG 对比度的值（比如主色是#2563eb，强调色建议#1d4ed8） - 若项目启用深色模式，
[data-bs-theme="dark"]下必须单独重写全部变量，CSS 变量不自动反转
如何安全地批量重设整套主色变量
推荐在项目全局 CSS 最末尾（确保加载顺序在 Bootstrap CSS 之后）一次性定义完整链：
:root {
--bs-primary: #2563eb;
--bs-primary-rgb: 37, 99, 235;
--bs-primary-text-emphasis: #1d4ed8;
--bs-primary-bg-subtle: #e0f2fe;
--bs-primary-border-subtle: #93c5fd;
}
这样改完后，.btn-primary、.form-control:focus、.card.border-primary、.link-primary 全部自动响应，无需额外加类。但注意：这些变量只影响 Bootstrap 自己生成的样式，不会穿透到你手写的 .my-card { border-color: #0d6efd; } 这类硬编码规则里。
立即学习“前端免费学习笔记（深入）”；
什么时候该放弃 CSS 变量，转用 Sass 重编译
当你要长期维护、升级频繁，或需要新增颜色类（如 .bg-brand）、调整衍生色逻辑（比如禁用 $enable-gradients）时，CSS 变量就力不从心了。此时必须走 Sass 路线：
- 新建
_custom.scss，在@import "bootstrap/scss/variables"前定义$primary、$primary-rgb、$primary-text-emphasis - 必须同步修改
$theme-colorsmap 才能生成新工具类（如.text-brand） - CDN 引入的
bootstrap.min.css无法被此方式影响，只能用 CSS 变量覆盖
真正容易被忽略的是作用域和加载顺序：:root 定义的变量若在 Bootstrap CSS 之前加载，会读不到；而 tooltip、dropdown 等动态挂载到 <body> 的组件，必须在 body 或全局 :root 上设变量才生效——局部组件内定义的 :root 对它们无效。
