Bootstrap 5.3.2明暗模式主题色设置咨询：自定义暗色模式失效

你的深色模式颜色没生效，核心问题是没开启Bootstrap的暗色模式支持，同时变量配置顺序需要调整。以下是修正后的最优实现方式：

关键修正点 #

• 必须设置 $enable-dark-mode: true，Bootstrap才会生成暗色模式对应的样式
• 自定义变量、主题色映射必须放在导入Bootstrap SCSS文件之前

完整代码示例 #

// 1. 启用暗色模式支持
$enable-dark-mode: true;

// 浅色模式主题色
$primary-light: #0850d0;
$secondary-light: #6c757d;
$success-light: #008000;
$info-light: #19b5fe;
$warning-light: #f9c80e;
$danger-light: #d91e18;

// 深色模式主题色
$primary-dark: #5590f7;
$secondary-dark: #bebebe;
$success-dark: #00d46a;
$info-dark: #19b5fe;
$warning-dark: #f9c80e;
$danger-dark: #ff6347;

// 2. 配置浅色模式主题色映射
$theme-colors: (
  "primary": $primary-light,
  "secondary": $secondary-light,
  "success": $success-light,
  "info": $info-light,
  "warning": $warning-light,
  "danger": $danger-light
);

// 3. 配置深色模式主题色映射（会自动覆盖浅色模式对应值）
$theme-colors-dark: (
  "primary": $primary-dark,
  "secondary": $secondary-dark,
  "success": $success-dark,
  "info": $info-dark,
  "warning": $warning-dark,
  "danger": $danger-dark
);

// 4. 导入Bootstrap核心SCSS文件（必须放在所有变量配置之后）
@import "../node_modules/bootstrap/scss/bootstrap";

额外注意事项 #

• 这种方式必须基于SCSS编译使用，不能直接用Bootstrap的CDN CSS文件
• 测试深色模式时，可以手动给<html>标签添加data-bs-theme="dark"属性强制切换，或者切换系统的深色模式
• 如果需要覆盖其他非主题色的样式（比如背景、文本色），可以用Bootstrap提供的@include color-mode(dark)指令：

@include color-mode(dark) {
  body {
    background-color: #1a2035;
    color: #e0e0e2;
  }
}

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