直接改--bs-btn-bg变量最省事：Bootstrap 5+ 按钮颜色由CSS变量控制，应在:root或特定选择器中重设--bs-btn-bg、--bs-btn-border-color、--bs-btn-hover-bg等，避免覆盖.btn的background-color；仅改部分变量或加载顺序错误会导致btn-outline-*等失效，深色模式需配合@media手动适配。
直接改 --bs-btn-bg 变量最省事
Bootstrap 5+ 的按钮颜色由 CSS 变量控制，不是靠写死的 background-color。硬改 .btn-primary { background: #xxx !important } 虽然能见效，但会破坏状态逻辑（比如 :hover、:disabled 可能回退默认色），也容易被后续升级覆盖。
正确做法是在 :root 或按钮容器里重设变量：
:root {
--bs-btn-bg: #6a5acd;
--bs-btn-border-color: #5a4ac5;
--bs-btn-hover-bg: #5a4ac5;
--bs-btn-active-bg: #4a3a95;
}
- 所有带
btn类的按钮都会自动响应，不用改 HTML - 变量名必须严格匹配官方命名（如
--bs-btn-hover-bg，漏掉-hover-就无效） - 如果只影响某类按钮（比如仅
.btn-primary），把选择器换成.btn-primary更安全
想新增一个 btn-purple 类而不是覆盖 btn-primary
Bootstrap 不提供 btn-purple 这种开箱即用的类，但支持扩展——关键不是复制粘贴样式，而是复用它的状态逻辑。
如果你用 Sass（推荐）：
立即学习“前端免费学习笔记（深入）”；
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
$purple: #8a2be2;
$purple-rgb: 138, 43, 226;
.btn-purple {
@include button-variant($purple-rgb, $purple, $purple, $purple);
}
-
button-variant()会自动生成:hover、:focus、:disabled等完整状态，手动写容易漏 - 没用 Sass？那就用 CSS 变量 + 组合类：
<button class="btn btn-purple"></button>，再定义.btn-purple { --bs-btn-bg: #8a2be2; } - 别单独写
.btn-purple:hover { background: ... }，否则禁用态还是蓝的
btn-outline-* 颜色不生效？三个变量缺一不可
.btn-outline-success 还是绿色边框，说明你只改了 --bs-btn-border-color，但没动另外两个关键变量。
btn-outline-* 实际依赖三组变量同时生效：
-
--bs-btn-color：文字颜色 -
--bs-btn-border-color：边框颜色 -
--bs-btn-bg：背景色（需设为transparent才显“空心”效果）
例如要让 .btn-outline-purple 生效：
.btn-outline-purple {
--bs-btn-color: #8a2be2;
--bs-btn-border-color: #8a2be2;
--bs-btn-bg: transparent;
}
- 确保你的 CSS 在 Bootstrap 的 CSS 之后加载，否则变量会被覆盖
- 不要在
内联属性里写 CSS 变量——它不继承
深色模式下自定义按钮颜色反了怎么办
Bootstrap 5.3+ 支持 prefers-color-scheme，但自定义的 --bs-btn-bg 不会自动切换。它只管内置的 btn-dark、btn-light 那套逻辑。
必须手动加媒体查询适配：
:root {
--bs-btn-bg: #6a5acd;
}
@media (prefers-color-scheme: dark) {
:root {
--bs-btn-bg: #4a4a7a;
--bs-btn-border-color: #3a3a6a;
}
}
- 别指望 Bootstrap 自己“感知”你设的紫色并给它配个暗色版——主题逻辑得自己补全
- 如果用了 Sass，可以在
$theme-colors里定义深色模式映射，但变量覆盖仍需媒体查询兜底 - 最容易被忽略的是：
--bs-btn-color（文字色）也要同步调，否则深色背景上文字可能看不见
