直接修改 Sass 变量（如 $primary）并确保在 @import "bootstrap/scss/bootstrap" 前生效，是稳妥定制 Bootstrap 主题色的唯一可靠方式；需同步更新 $theme-colors 映射、合理覆盖衍生变量，并避免使用 Bootswatch 等预编译方案以保障长期可维护性。
直接改 $primary 等 Sass 变量是最稳妥的方式
bootstrap 的主题色不是写死在 css 里，而是由一组 sass 变量驱动的。你改了 $primary、$success 这些变量，所有用到它们的地方（比如 .btn-primary、.alert-success）都会跟着变——前提是编译时变量在 @import "bootstrap/scss/bootstrap" 之前生效。
- 必须用 Sass（.scss 文件），不能只引入 bootstrap.min.css
- 变量重定义必须放在
@import语句之前，顺序错了就白写了 - 推荐新建一个
custom.scss，只放变量和 import，避免污染其他样式逻辑 - 别漏掉
$theme-colors映射——只改$primary但不把它加进映射里，.text-primary可能不生效
想加新颜色（比如 navy 或 gold）？补全 $theme-colors 就行
Bootstrap 的工具类（.bg-navy、.border-gold）靠 $theme-colors 这个 map 生成。你定义了新变量，还得手动塞进去，它才认。
- 先声明变量：
$navy: #001f3f; - 再扩展映射：
$theme-colors: map-merge($theme-colors, ("navy": $navy)); - 注意要用
map-merge，直接赋值会覆盖掉默认颜色（primary、secondary全没了） - 编译后就能用
.text-navy、.btn-outline-navy，和内置色完全一致
按钮 hover 色太深/太浅？别硬调 opacity，优先查衍生变量
Bootstrap 会根据 $primary 自动生成 $primary-hover、$primary-border 等，这些值由算法算出（比如用 darken() 或 lighten()）。如果你发现 hover 色不对劲，大概率是底层算法没适配你的新色值。
- 可以手动覆盖：
$primary-hover: darken($primary, 10%); - 或者关掉自动推导：
$enable-shadows: false;（影响范围大，慎用） - 别在 CSS 里用
.btn-primary:hover { background: #xxx }覆盖——破坏响应式状态逻辑，比如禁用态可能失效 - 检查你用的 Bootstrap 版本：5.3+ 加了
$primary-bg-subtle等新变量，旧写法可能被忽略
用 Bootswatch 或 CSS 替换？适合原型，不适合长期维护
Bootswatch 主题本质是预编译好的 CSS，拿来快速换肤没问题；但一旦你要微调某个组件的边框圆角或文字粗细，就得去扒源码、改 CSS、再手动 patch，很快失控。
- 动态切换主题（比如用户点按钮换色）确实常用 JS + 多套 CSS，但每套 CSS 都得单独维护变量逻辑
- 如果项目已用 Sass，硬切到纯 CSS 主题等于放弃变量复用和类型安全
- 有个隐藏坑：Bootswatch 某些主题会重写
$font-size-base或$spacers，和你的布局断层
真正要长期可控地改主题色，绕不开 Sass 变量体系。那个 custom.scss 文件，就是你整个品牌色的唯一信源——改一处，全局响应，也只改这一处。
