如何基于Bootstrap主题，用Sass编辑明暗主题的默认配色

你的代码问题核心在于：Bootstrap的@include color-mode()是用来生成运行时动态切换的CSS变量的，而直接在混入内定义Sass变量（$primary这类）不会生效——因为Sass变量是编译阶段确定的静态值，无法随主题切换动态更新。正确的做法是结合Bootstrap的CSS变量系统，通过覆盖对应--bs-*变量实现主题切换。

正确实现步骤 #

1. 按顺序引入Bootstrap Sass文件 #

确保导入顺序正确，先加载基础变量和工具，再定义自定义内容，最后加载核心样式：

// 导入Bootstrap变量文件（可选，用于参考默认值）
@import "../node_modules/bootstrap/scss/variables";
// 导入颜色模式工具混入
@import "../node_modules/bootstrap/scss/mixins/color-mode";

2. 定义浅色主题的默认Sass变量 #

先设置浅色主题的基础变量，这些值会作为默认样式的基础：

// 浅色主题默认变量
$primary: #696cff;
$secondary: #8492a2;
$success: #70dc38;
$danger: #ff3e1d;
$warning: #ffab00;
$info: #02c3eb;
$body-bg: #f4f4f8;
$card-bg: #fff;

// 将自定义变量映射到Bootstrap的主题色系统
$theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "success": $success,
  "danger": $danger,
  "warning": $warning,
  "info": $info
);

// 覆盖Bootstrap的全局背景变量
$body-bg: $body-bg;
$card-bg: $card-bg;

3. 用color-mode混入定义深色主题的CSS变量覆盖 #

在混入内直接修改Bootstrap对应的--bs-*CSS变量，这些变量支持运行时动态切换：

@include color-mode(dark) {
  // 覆盖主题色CSS变量
  --bs-primary: #5f62e7;
  --bs-secondary: #8492a2;
  --bs-success: #70dc38;
  --bs-danger: #ff3e1d;
  --bs-warning: #ffab00;
  --bs-info: #02c3eb;

  // 覆盖背景类CSS变量
  --bs-body-bg: #232333;
  --bs-card-bg: #2a2b41;
}

4. 导入Bootstrap核心样式 #

在所有自定义配置完成后，导入Bootstrap的核心样式文件：

@import "../node_modules/bootstrap/scss/bootstrap";

关键说明 #

• 主题切换依赖于data-bs-theme属性：在HTML根元素（如<html>或<body>）上添加data-bs-theme="dark"即可切换到深色主题，浅色主题默认无需添加（或设置为light）。
• Bootstrap所有组件会自动继承这些CSS变量，无需额外修改组件样式。
• 如需自定义其他变量（如文本颜色、边框色），可查找Bootstrap官方文档中的--bs-*变量列表，在color-mode混入内直接覆盖即可。

完整示例代码 #

// 导入Bootstrap基础文件
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins/color-mode";

// 浅色主题默认变量
$primary: #696cff;
$secondary: #8492a2;
$success: #70dc38;
$danger: #ff3e1d;
$warning: #ffab00;
$info: #02c3eb;
$body-bg: #f4f4f8;
$card-bg: #fff;

// 映射到Bootstrap主题色系统
$theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "success": $success,
  "danger": $danger,
  "warning": $warning,
  "info": $info
);

$body-bg: $body-bg;
$card-bg: $card-bg;

// 深色主题变量覆盖
@include color-mode(dark) {
  --bs-primary: #5f62e7;
  --bs-secondary: #8492a2;
  --bs-success: #70dc38;
  --bs-danger: #ff3e1d;
  --bs-warning: #ffab00;
  --bs-info: #02c3eb;
  --bs-body-bg: #232333;
  --bs-card-bg: #2a2b41;
}

// 导入Bootstrap核心样式
@import "../node_modules/bootstrap/scss/bootstrap";

内容的提问来源于stack exchange，提问作者Çağdaş