Bootstrap 5.3.3暗黑模式下自定义text-primary文本颜色问题

问题根源 #

你当前的SCSS中，$text-color-dark是全局文本颜色变量，不会直接作用于.text-primary类的暗黑模式颜色。Bootstrap 5的暗黑模式针对特定主题色类的变量有单独的定义规则，需要针对性配置才能覆盖.text-primary的暗色模式样式。

方案一：用Bootstrap内置暗色主题变量覆盖 #

Bootstrap 5.3+支持通过$theme-colors-dark变量定义暗黑模式下的主题色映射，直接替换.text-primary对应的颜色：

修改你的custom.scss，调整变量顺序并添加暗色主题映射：

// Custom.scss
// Option A: Include all of Bootstrap

// BOOTSTRAP Primary Color Overrides
$primary: #e4002b;
$secondary: #706f6f;
$success: #c4d600;
$info: #0072ce;
$warning: #ffc72c;
$danger: #a70000;
$light: #b2b2b2;
$dark: #060202;

// 定义暗黑模式下的主题色映射，仅修改primary对应的绿色
$theme-colors-dark: (
  "primary": #00ff0d,
  "secondary": $secondary,
  "success": $success,
  "info": $info,
  "warning": $warning,
  "danger": $danger,
  "light": $light,
  "dark": $dark
);

// ************Links************
$link-color: #000;
$link-color-dark: #fff;

// ************Accordion************
$accordion-button-bg: transparent;
$accordion-button-active-bg: transparent;

// 1. 先导入函数和变量
@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/variables';

// 2. 导入Bootstrap核心
@import '../node_modules/bootstrap/scss/bootstrap';

原理：$theme-colors-dark会让Bootstrap在暗黑模式（包括系统自动切换或手动设置data-bs-theme="dark"）下，用该映射中的颜色替换对应主题类，包括.text-primary、.btn-primary等。

方案二：直接通过媒体查询强制覆盖样式 #

如果方案一不生效，可在custom.scss末尾（导入Bootstrap之后）添加以下代码，强制修改暗黑模式下的.text-primary颜色：

// 针对系统自动切换的暗色模式
@media (prefers-color-scheme: dark) {
  .text-primary {
    color: #00ff0d;
  }
}

// 针对手动设置data-bs-theme="dark"的场景
[data-bs-theme="dark"] .text-primary {
  color: #00ff0d;
}

若样式优先级不够，可在颜色值后添加!important，或提升选择器优先级（比如写成body[data-bs-theme="dark"] .text-primary）。

验证步骤 #

1. 重新编译SCSS文件，确保修改后的样式生成到最终CSS中；
2. 切换暗黑模式：要么开启系统暗色模式，要么给根元素添加data-bs-theme="dark"属性；
3. 检查使用.text-primary的文本是否变为设置的绿色。

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