如何在Bootstrap 5.X暗色模式下用Sass单独修改主题色？

你之前的方法无效，核心原因是修改时机不对——得在Bootstrap编译核心样式前，在暗色模式的上下文里重新定义$primary，这样Bootstrap才会生成对应暗色模式的CSS变量。

正确的custom.scss结构应该是这样：

// 1. 设置亮色模式的默认主题色
$primary: #0e548c;

// 2. 导入Bootstrap的变量文件，让后续修改能基于Bootstrap的变量体系
@import "../bootstrap/scss/variables";

// 3. 在暗色模式上下文里覆盖$primary
@include color-mode(dark) {
  $primary: #0062cc;
}

// 4. 导入Bootstrap的核心样式，此时会根据上面的变量生成亮色/暗色模式的对应样式
@import "../bootstrap/scss/bootstrap";

补充说明 #

• Bootstrap 5的暗色模式依赖Sass的color-mode混合宏和CSS变量实现，只有在导入核心样式前修改变量，才能让Bootstrap在编译时为暗色模式重新计算--bs-primary等相关CSS变量。
• 你之前直接导入root的方式，只是引入了初始的CSS变量定义，没有触发Bootstrap重新基于修改后的$primary生成暗色模式的变量。

如果需要更直接的控制，也可以跳过Sass变量，直接在color-mode块里修改CSS变量：

@include color-mode(dark) {
  :root {
    --bs-primary: #0062cc;
    // 可同步修改关联变量，比如RGB值（部分组件会用到）
    --bs-primary-rgb: 0, 98, 204;
  }
}

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