如何修改Bootstrap 5中上下文颜色类的默认颜色

Bootstrap 5提供了几种灵活的方式来修改这些主题类的默认颜色，根据你的项目构建方式选择最适合的方案：

1. 使用Sass变量覆盖（推荐，原生无冲突） #

如果你的项目是用Sass构建的，直接覆盖Bootstrap的核心变量是最优解——所有依赖这些变量的组件（按钮、文本、背景、边框等）都会自动同步更新，不会出现样式冲突。

操作步骤：

• 在导入Bootstrap的Sass文件之前，定义你需要修改的变量
• 然后正常导入Bootstrap的主Sass文件

示例代码：

// 自定义主题颜色变量
$primary: #9c27b0; // 替换成你需要的紫色
$success: #8bc34a; // 替换成你需要的浅绿色

// 导入Bootstrap源文件
@import "../node_modules/bootstrap/scss/bootstrap";

编译后，所有.btn-primary、.text-primary、.bg-success这类类都会使用你定义的颜色，包括hover、active等状态的样式也会自动适配。

2. 自定义CSS覆盖（快速上手，无需编译） #

如果不想用Sass，直接在Bootstrap CSS之后引入自定义样式表，覆盖目标类的样式即可。注意要保证自定义CSS的加载顺序在Bootstrap之后，确保样式权重足够。

示例代码：

/* 修改.btn-primary的全状态样式 */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #ff5722;
  --bs-btn-border-color: #ff5722;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #e64a19;
  --bs-btn-hover-border-color: #d84315;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #d84315;
  --bs-btn-active-border-color: #bf360c;
}

/* 修改.text-success的文字颜色 */
.text-success {
  --bs-text-opacity: 1;
  color: #4caf50;
  /* 若权重不够可加!important，但尽量避免过度使用 */
}

这种方法适合快速调整个别样式，但如果要修改大量主题类，效率不如Sass变量覆盖。

3. 修改Bootstrap CSS变量（动态调整，支持局部生效） #

Bootstrap 5原生支持CSS变量，你可以直接修改根元素的变量实现全局主题变更，也可以在特定容器内定义变量，实现局部主题修改。

全局修改 #

:root {
  --bs-primary: #3f51b5; /* 自定义primary主题色 */
  --bs-success: #009688; /* 自定义success主题色 */
}

修改后，所有依赖这些变量的Bootstrap类都会自动更新颜色。

局部修改（仅影响指定容器内的元素） #

.custom-theme-section {
  --bs-primary: #e91e63;
  --bs-success: #ffc107;
}

在这个.custom-theme-section容器内的.btn-primary、.text-success会使用你定义的局部颜色，不会影响全局样式。

内容的提问来源于stack exchange，提问作者Ernesto Ruiz