首先通过覆盖Sass变量自定义Bootstrap主题色，在引入源码前设置如$primary等变量值；接着可扩展$theme-colors映射添加新颜色类；最后调整全局变量控制衍生色生成，实现高效可维护的主题定制。
Bootstrap 提供了强大的 Sass 变量系统，允许开发者通过覆盖默认变量来自定义主题颜色。这种方式比直接写 CSS 更高效、更可维护，尤其适用于需要统一设计语言的项目。
1. 使用 Sass 覆盖 Bootstrap 颜色变量
Bootstrap 的主题颜色（如 primary、secondary 等）由一组 Sass 变量定义。要自定义这些颜色，你需要在引入 Bootstrap 源码前重新赋值这些变量。
步骤如下：
示例代码：// 自定义变量 $primary: #005cbf; $success: #28a745; $danger: #d32f2f; $info: #17a2b8; $warning: #ffc107; // 引入 Bootstrap（必须放在变量之后） @import "bootstrap/scss/bootstrap";
这样编译后，所有使用 .btn-primary、.alert-success 等类的组件都会应用你设定的颜色。
立即学习“前端免费学习笔记（深入）”；
2. 扩展或新增自定义主题色
除了修改内置颜色，你还可以添加新的主题色，比如“darkblue”或“gold”，让它们融入 Bootstrap 的工具类体系。
方法是扩展 $theme-colors Map：
// 定义基础变量 $primary: #007bff; $custom-blue: #003366; $gold: #ffd700; // 扩展主题颜色映射 $theme-colors: ( "primary": $primary, "custom-blue": $custom-blue, "gold": $gold ); @import "bootstrap/scss/bootstrap";
编译后，你可以使用 .text-custom-blue、.bg-gold 等类，就像原生支持一样。
3. 修改全局色调与亮度变量
Bootstrap 内部会根据主颜色生成浅色或深色变体（如 hover 状态）。你可以控制这些衍生颜色的生成逻辑。
常见相关变量包括：
-
$enable-gradients：是否启用渐变 -
$color-contrast-light：浅色文本对比度阈值 -
$primary-bg-subtle等用于背景的柔和色（Bootstrap 5+）
如果你发现按钮 hover 颜色太深或太浅，可以调整底层算法参数，或直接覆盖 $primary-hover 这类衍生变量（需查看源码定义方式）。
基本上就这些。只要掌握变量覆盖顺序和 $theme-colors 结构，就能灵活定制符合品牌风格的主题色，同时保留 Bootstrap 的完整功能支持。
