修改 $theme-colors 是唯一可靠方式，因其驱动按钮及表单、alert等所有组件的颜色状态，直接覆盖CSS会破坏悬停、禁用等逻辑且无法适配深色模式。
修改 $theme-colors 是唯一可靠方式
Bootstrap 5+ 的按钮颜色（如 btn-primary）不来自独立的按钮变量，而是统一由全局调色板 $theme-colors 驱动。直接覆盖 .btn-primary 的 background-color 会漏掉悬停、禁用、焦点边框、文字反色等状态，且无法同步影响表单控件、alert、badge 等共用同一色系的组件。
正确做法是在自定义 Sass 文件中提前重定义 $theme-colors，再导入 Bootstrap：
$theme-colors: ( "primary": #2563eb, "secondary": #64748b, "success": #10b981, "danger": #ef4444, "warning": #f59e0b, "info": #3b82f6, "light": #f9fafb, "dark": #111827 ); <p>@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; // ……其余导入
- 必须在
@import "bootstrap/scss/variables"之前定义$theme-colors，否则会被默认值覆盖 - 键名（如
"primary"）不能改，否则btn-primary类将找不到对应颜色 - 删掉某个键（如去掉
"warning"）会导致btn-warning完全失效，编译时无报错但样式丢失
不要试图用 !important 覆盖 CSS
在 CSS 文件里写 .btn-primary { background-color: red !important; } 看似简单，但实际会破坏 Bootstrap 的状态逻辑：
-
:hover和:disabled样式仍使用原始主题色，按钮悬停后变蓝、禁用后变灰，和你设的红色不匹配 - 深色模式下无法自动适配（Bootstrap 5.3+ 的
prefers-color-scheme逻辑依赖变量生成） - 所有用到
primary的地方（border-primary、text-primary、bg-primary）都得手动补一遍，维护成本爆炸
$enable-negative-margins 这类开关变量不影响按钮颜色
有人误以为改 $enable-rounded 或 $enable-shadows 能间接控制按钮外观，其实它们只影响圆角、阴影等修饰属性，和颜色完全无关。按钮颜色路径是单向的：$theme-colors → color-contrast() 函数计算文字色 → button-variant() 生成各类状态样式。绕过这个链路，等于放弃 Bootstrap 的设计一致性。
如果你只需要改某一个按钮实例（比如登录按钮），直接加行内 style 或单独 class 更合适，而不是动全局变量。
导出变量后，color-mode 仍需手动适配暗色
Bootstrap 5.3+ 支持通过 data-bs-theme="dark" 切换主题，但 $theme-colors 本身不区分明暗模式——它只是一组静态映射。这意味着你设的 "primary": #2563eb 在暗色模式下可能对比度不足或可访问性不达标。
- 若需暗色专属色值，必须用 CSS 自定义属性（
--bs-primary）配合媒体查询或data-bs-theme属性重置 - Sass 层面无法条件编译“暗色版
$theme-colors”，因为变量在编译期已固化 - 常见坑：开发者改了
$theme-colors却忘了检查 WCAG 对比度，尤其在btn-outline-*上文字色可能变得不可读
改 Sass 变量这事看着只是换几个值，但真正卡住人的永远是「什么时候导入」「哪些变量必须前置」「哪些状态被连带影响」——这些细节没对齐，编译不出错，但按钮点上去就露馅。
