最省事的方法是直接修改Bootstrap 5.2+的CSS变量（如--bs-btn-primary-bg），需配齐配套变量、确保加载顺序、作用域精准，并为深色模式单独定义。
直接改 --bs-btn-primary-bg 这类 css 变量最省事，改一次，所有 .btn-primary 实例（含 :hover、:active、:disabled）自动同步更新；硬写 .btn-primary { background-color: ... } 很容易漏状态、被覆盖、不响应深色模式。
用 CSS 变量重定义 --bs-btn-primary-bg 等
Bootstrap 5.2+ 的按钮颜色由 CSS 自定义属性驱动，不是靠写死的 background-color。你只需要在 :root 或更小作用域里重设变量，框架内部会基于这些值自动计算各状态样式。
- 必须确保你的自定义 CSS 在 Bootstrap 的 CSS 之后加载，否则变量会被覆盖
- 变量名必须严格匹配，比如
--bs-btn-primary-hover-bg不能写成--bs-btn-primary-hover-bk - 只设
--bs-btn-primary-bg不够——还得配齐--bs-btn-primary-border-color、--bs-btn-primary-hover-bg、--bs-btn-primary-active-bg、--bs-btn-primary-disabled-bg，否则悬停或点击时会跳回默认色 - 如果只想影响某块区域内的按钮，用作用域选择器更安全：
.my-form .btn-primary { --bs-btn-primary-bg: #5a1e9c; }
.btn-outline-primary 颜色不生效？检查三变量是否齐全
.btn-outline-* 类不读 --bs-btn-primary-bg，它依赖的是另一套变量：--bs-btn-color（文字色）、--bs-btn-border-color（边框色）、--bs-btn-bg（背景透明）。少设一个，就会 fallback 到 Bootstrap 默认值。
- 常见现象：改了
--bs-btn-border-color，但边框还是绿色——说明--bs-btn-color没同步改，导致button-variant()内部逻辑降级 - 正确做法是三者一起设：
--bs-btn-color: #8a2be2; --bs-btn-border-color: #8a2be2; --bs-btn-bg: transparent; - 别在
里写内联变量，CSS 自定义属性不支持内联继承
想新增 .btn-purple 类？别手写 :hover 和 :active
手动补 .btn-purple:hover、.btn-purple:active 极易遗漏 :focus、:disabled 或焦点环（box-shadow），还破坏可维护性。Bootstrap 提供了 button-variant() mixin 来干这事。
- 如果你用 Sass：导入必要模块后，直接调用
@include button-variant($purple-rgb, $purple, $purple, $purple);，所有状态自动生成 - 如果不用 Sass：用组合类 + CSS 变量更轻量：
.btn.btn-purple { --bs-btn-bg: #8a2be2; --bs-btn-border-color: #7a1bd2; --bs-btn-hover-bg: #7a1bd2; } - 注意
.btn-purple是纯扩展类，不影响.btn-primary或其他语义组件，也不联动.alert-purple（后者不存在）
:active 态颜色失效？大概率是选择器权重不够
Bootstrap 源码里类似 .btn-primary:active 的规则带 !important，普通选择器如 .btn:active 会被压过。这不是 bug，是设计使然。
- 最简方案：提高 specificity 并加
!important，例如.btn.btn-primary:active { background-color: #4a1e9c !important; } - 更彻底的做法：在 Sass 中重定义
$btn-primary-active-bg变量，再重新编译——这样连.btn-outline-primary:active的边框色也一并更新 - 移动端需额外加
touch-action: manipulation到按钮上，否则 iOS Safari 可能忽略:active
真正麻烦的不是改颜色本身，而是忘记深色模式下这些变量不会自动切换——@media (prefers-color-scheme: dark) 块得手动加，而且得加在变量定义之后，否则浅色值会覆盖深色设置。
