直接修改 Sass 变量 $primary 和 $secondary 是 Bootstrap 5 主题色定制最干净的方式，需在引入 variables 前重定义并用 !default 保障安全；扩展主题色应使用 map-merge 修改 $theme-colors；CSS 自定义属性仅适用于 Bootstrap 5.3+。
直接改 $primary 和 $secondary Sass 变量就行
bootstrap 5 默认用 sass 构建，主题色不是写死的 css，而是由顶层变量控制。改颜色最干净的方式，是在自定义 sass 文件里重定义 $primary 和 $secondary，再引入 bootstrap 源码 —— 这样所有依赖它们的组件（按钮、表单、alert、badge 等）会自动响应新值。
常见错误是只覆盖 CSS 类（比如手动写 .btn-primary { background-color: #ff6b35; }），结果 .text-primary、.border-primary、.bg-secondary 还是旧色，维护成本高还容易漏。
- 必须在
@import "bootstrap/scss/functions";之后、@import "bootstrap/scss/variables";之前重定义变量，否则会被默认值覆盖 - 推荐用
!default语法安全覆盖：$primary: #4a6fa5 !default;，避免被后续重复声明干扰 - 如果项目没用 Sass（比如只引入 CDN 的 CSS），那就没法真正“修改主题色”，只能靠 CSS 层叠强行覆盖，且需同步处理所有衍生类名
用 map-merge 扩展 $theme-colors 更灵活
Bootstrap 把主题色存在 $theme-colors map 里，默认含 primary、secondary、success 等键。想加个 brand 色或微调 info，别硬改变量，用 map-merge 扩展更稳妥：
$theme-colors: map-merge(
$theme-colors,
(
"brand": #2563eb,
"warning": #d97706
)
);
这样生成的 .text-brand、.bg-brand 会自动可用，且不影响原有逻辑。注意：扩展后仍需确保在 @import "bootstrap/scss/maps"; 前执行，否则 map 不生效。
- 不能用普通赋值（
$theme-colors: ("brand": #2563eb);），那会完全替换原 map，丢掉primary等默认色 - 如果用了 Bootstrap 的配色工具函数（如
color-contrast()或shade-color()），它们会自动适配新 map 中的颜色，无需额外处理 - 某些第三方组件库（如 Bootstrap Icons）不读取这个 map，它们的颜色得单独处理
PostCSS / CSS-in-JS 用户怎么绕过 Sass？
用 Vite + Tailwind 或 React + Emotion 的项目，往往没接 Sass 流程。这时没法改变量，但可以靠 CSS 自定义属性（CSS vars）间接控制：
Bootstrap 5.3+ 在根元素注入了 --bs-primary、--bs-secondary 等变量，且多数组件已适配（如 .btn-primary 内部用 var(--bs-primary)）。所以只需在 :root 里重设：
:root {
--bs-primary: #1e40af;
--bs-secondary: #6b7280;
}
但要注意兼容范围：
- 仅限 Bootstrap 5.3+，旧版本不支持该机制
- 部分组件（如
.progress-bar的背景、某些 SVG 图标 fill）仍硬编码颜色，需额外 CSS 覆盖 - 如果用的是压缩版 CSS（
bootstrap.min.css），变量名可能被混淆，建议用未压缩版或构建时保留 CSS vars
改完颜色后按钮边框变灰？检查 $enable-shadows 和 $border-radius
改完 $primary 后，发现 .btn-primary:focus 边框还是蓝灰色，或者圆角突然变直 —— 很可能是因为没同步调整配套变量。Bootstrap 的视觉效果是组合出来的：
-
$primary只管主色，$primary-focus控制焦点边框色（默认是mix($primary, #000, 15%)），若要让焦点边框也变深，得一并重定义$primary-focus -
$enable-shadows: true开启按钮悬停阴影，但阴影色基于$black，和主题色无关；若想阴影随主题变，得自己重写.btn:hover规则 -
$border-radius影响所有圆角，但它和颜色无关；不过新手常误以为“颜色变了圆角也该变”，其实是两个独立维度
最容易被忽略的是：改了颜色后，color-contrast($primary) 计算出的文字反色可能不理想（比如深紫底上灰字可读性差），需要手动指定 $primary-text-emphasis 等对比度变量。
