如何用Sass生成Bootstrap 5.3替代主题色类以动态切换主色？

方案一：Sass预编译生成主题覆盖文件 #

这种方式适合需要兼容旧浏览器的场景，通过预编译生成独立的主题CSS文件，在页面中动态引入覆盖默认样式。

1. 单个主题的Sass模板 #

创建一个Sass文件（比如orange-as-primary.scss），重新定义$primary变量，复用Bootstrap的混合宏生成所有依赖primary的组件和工具类样式：

// 引入Bootstrap核心依赖（仅必要部分，无需全量引入）
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

// 重新定义primary色为橙色（可替换为任意颜色值或Bootstrap内置色值）
$primary: $orange-500;

// 重新生成primary相关工具类（text-primary、bg-primary、border-primary等）
$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (primary: $primary)
        )
      )
    ),
    "background-color": map-merge(
      map-get($utilities, "background-color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "background-color"), "values"),
          (primary: $primary)
        )
      )
    ),
    "border-color": map-merge(
      map-get($utilities, "border-color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "border-color"), "values"),
          (primary: $primary)
        )
      )
    )
  )
);

// 生成工具类CSS
@import "bootstrap/scss/utilities/api";

// 重新生成primary相关组件样式（包含悬停、激活态）
.btn-primary {
  @include button-variant($primary, $primary);
}

.btn-outline-primary {
  @include button-outline-variant($primary);
}

.alert-primary {
  @include alert-variant($primary, tint-color($primary, 80%), shade-color($primary, 20%));
}

.badge.bg-primary {
  @include badge-variant($primary);
}

.page-item.active .page-link {
  background-color: $primary;
  border-color: $primary;
}

.page-link:hover {
  color: $primary;
}

.form-control:focus {
  border-color: $primary;
  box-shadow: 0 0 0 0.25rem rgba($primary, 0.25);
}

.progress-bar.bg-primary {
  background-color: $primary;
}

2. 批量生成多主题文件 #

如果需要生成多个主题（橙色、紫色等），可以用Sass循环一次性生成所有主题文件：

// 定义需要的主题色映射（键为主题名，值为颜色）
$theme-primary-colors: (
  orange: $orange-500,
  purple: $purple-500,
  teal: $teal-500
);

// 循环生成每个主题的CSS文件
@each $name, $color in $theme-primary-colors {
  @output {
    filename: "#{$name}-as-primary.css";
  }

  // 引入核心依赖
  @import "bootstrap/scss/functions";
  @import "bootstrap/scss/variables";
  @import "bootstrap/scss/mixins";
  @import "bootstrap/scss/utilities";

  $primary: $color;

  // 工具类部分
  $utilities: map-merge(
    $utilities,
    (
      "color": map-merge(
        map-get($utilities, "color"),
        (values: map-merge(map-get(map-get($utilities, "color"), "values"), (primary: $primary)))
      ),
      "background-color": map-merge(
        map-get($utilities, "background-color"),
        (values: map-merge(map-get(map-get($utilities, "background-color"), "values"), (primary: $primary)))
      ),
      "border-color": map-merge(
        map-get($utilities, "border-color"),
        (values: map-merge(map-get(map-get($utilities, "border-color"), "values"), (primary: $primary)))
      )
    )
  );

  @import "bootstrap/scss/utilities/api";

  // 组件样式部分
  .btn-primary { @include button-variant($primary, $primary); }
  .btn-outline-primary { @include button-outline-variant($primary); }
  .alert-primary { @include alert-variant($primary, tint-color($primary, 80%), shade-color($primary, 20%)); }
  .badge.bg-primary { @include badge-variant($primary); }
  .page-item.active .page-link { background-color: $primary; border-color: $primary; }
  .page-link:hover { color: $primary; }
  .form-control:focus { border-color: $primary; box-shadow: 0 0 0 0.25rem rgba($primary, 0.25); }
  .progress-bar.bg-primary { background-color: $primary; }
}

3. 编译与使用 #

用Dart Sass或Node Sass编译上述Sass文件，生成对应的orange-as-primary.css、purple-as-primary.css等文件。页面中先加载默认的bootstrap.css，然后通过JS动态切换引入的主题CSS文件（比如替换link标签的href属性，或动态添加/移除link标签）。

方案二：使用CSS变量（推荐现代浏览器） #

Bootstrap 5原生支持CSS变量，这种方式无需预编译，直接通过切换CSS类实现主题色切换，更灵活高效。

1. 定义主题CSS类 #

创建一个themes.css文件，定义不同主题的CSS变量：

/* 默认主题（Bootstrap原生蓝色） */
:root {
  --bs-primary: #0d6efd;
  --bs-primary-rgb: 13, 110, 253;
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-primary-border-subtle: #9ec5fe;
}

/* 橙色主题 */
.theme-orange {
  --bs-primary: #fd7e14;
  --bs-primary-rgb: 253, 126, 20;
  --bs-primary-bg-subtle: #fff3cd;
  --bs-primary-border-subtle: #ffecb5;
}

/* 紫色主题 */
.theme-purple {
  --bs-primary: #6f42c1;
  --bs-primary-rgb: 111, 66, 193;
  --bs-primary-bg-subtle: #e9d5ff;
  --bs-primary-border-subtle: #d6bcfa;
}

2. 切换主题的JS代码 #

通过给body或html元素添加/移除主题类，实现动态切换：

// 假设下拉菜单ID为theme-select，选项值为对应的主题类名
document.getElementById('theme-select').addEventListener('change', function(e) {
  // 移除所有已存在的主题类
  const themeClasses = ['theme-orange', 'theme-purple'];
  document.body.classList.remove(...themeClasses);
  // 添加选中的主题类
  document.body.classList.add(e.target.value);
});

优势 #

• 无需预编译，维护成本低，新增主题只需添加新的CSS类
• 切换无延迟，即时生效
• 支持所有Bootstrap组件的状态样式（悬停、激活、焦点等），因为Bootstrap 5的样式已基于CSS变量构建

方案对比 #

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