Bootstrap暗黑模式下标题颜色修改及匹配官方文档配色的实现方法

嘿，我完全懂你碰到的这个问题——用Bootstrap官方给的data-bs-theme="dark"开启暗黑模式后，标题的白色总是比官方文档里的要暗沉一些，看起来没那么通透是吧？其实这是因为Bootstrap的默认暗黑主题和官方文档用的自定义暗黑配色不是一回事，官方文档在基础暗黑主题的基础上，单独调整了标题这类元素的颜色变量。

下面给你几个简单可行的解决方法，帮你把配色对齐官方文档：

方法一：全局覆盖CSS变量（最推荐） #

Bootstrap的颜色模式是通过CSS变量来控制的，我们只需要在加载Bootstrap的CSS之后，添加一段自定义样式，覆盖暗黑模式下的标题颜色变量就行：

/* 放在Bootstrap CSS引入之后 */
[data-bs-theme="dark"] {
  /* 把标题颜色改成和官方文档一致的亮白色 */
  --bs-heading-color: #ffffff;
  /* 也可以同步调整正文文本颜色，让整体风格更统一 */
  --bs-body-color: #dee2e6;
}

这样设置后，所有标题元素（h1到h6）都会自动用上这个更亮的白色，和官方文档的暗黑模式观感一致。

方法二：用Sass自定义主题（适合用Sass编译Bootstrap的项目） #

如果你的项目是用Sass来引入和编译Bootstrap的，可以在导入Bootstrap核心样式之前，先定义暗黑模式下的颜色变量：

// 自定义暗黑模式的颜色变量
$dark-theme-colors: (
  "heading": #ffffff,
  "body": #dee2e6
);

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

编译后的Bootstrap CSS会直接使用你定义的变量，不需要额外写覆盖样式，适合需要深度定制主题的项目。

方法三：直接给标题元素加样式（快速临时方案） #

如果不想调整全局变量，也可以直接针对标题标签写自定义样式：

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
  color: #ffffff !important;
}

这个方法虽然直接，但优先级较高，适合快速测试或者只需要调整特定页面的场景。

试一下上面的方法，你的暗黑模式标题颜色就能和Bootstrap官方文档的效果完全匹配啦！

备注：内容来源于stack exchange，提问作者Peter