如何结合Bootstrap5.3明暗模式为Bootswatch主题配置不同Sass主色？

你可以利用Bootstrap 5.3的color-mode()混合宏，在Sass中针对明暗模式分别重写主色变量，不需要生成两个独立CSS文件，完全符合颜色模式的设计逻辑。具体步骤如下：

核心思路 #

Bootswatch的_variables.scss本质是覆盖Bootstrap的默认Sass变量，而Bootstrap 5.3的颜色模式系统会将Sass变量编译为对应模式下的CSS变量。通过在color-mode()块内重写变量，就能让所有依赖该变量的组件自动适配明暗模式。

具体实现代码 #

在你的自定义Sass入口文件中按以下顺序编写：

// 1. 导入Bootstrap基础工具（必须先导入，否则color-mode混合宏无法使用）
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins/color-mode";

// 2. 导入Bootswatch主题的变量文件
@import "../path/to/bootswatch/your-theme/_variables";

// 3. 定义浅色模式的主色（如果不需要修改Bootswatch默认值，这一步可以省略）
$primary: #0d6efd;

// 4. 针对深色模式重写主色变量
@include color-mode(dark) {
  $primary: #3b82f6; // 深色模式专属主色
  // 这里还可以按需重写其他变量，比如$secondary、$info等
}

// 5. 导入Bootstrap核心样式和Bootswatch主题样式
@import "../node_modules/bootstrap/scss/bootstrap";
@import "../path/to/bootswatch/your-theme/_bootswatch";

为什么这比直接覆盖CSS类更好 #

• 全局生效：所有使用$primary变量的Bootstrap/Bootswatch组件（按钮、导航栏、表单等）都会自动切换主色，不需要逐个类手动覆盖
• 符合设计初衷：编译后的CSS会包含明暗模式的媒体查询规则，自动跟随系统或用户设置的颜色模式切换，无需额外JS控制
• 可维护性更高：变量集中管理，后续修改颜色只需调整对应变量值即可

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