问题出在Bootstrap默认编译时，部分组件（比如.btn-outline-*）的样式会直接使用Sass变量的硬编码值，而非CSS变量——即便你开启了$enable-css-variables: true。要让这些组件响应深色模式的CSS变量覆盖，需要从Sass编译层面强制它们使用CSS变量。

方案一：让主题颜色变量直接引用CSS变量 #

这种方式从根源上让所有依赖$theme-colors的组件都使用CSS变量，步骤如下：

1. 在app.scss开头先定义浅色主题的基础CSS变量：

:root {
  --bs-primary: #1037C4;
  --bs-secondary: /* 你的浅色secondary默认值 */;
  --bs-danger: /* 你的浅色danger默认值 */;
  // 其他主题色变量按需补充
}

2. 修改$theme-colors，让每个颜色值引用对应的CSS变量：

$enable-css-variables: true;

$theme-colors: (
  "primary": var(--bs-primary),
  "secondary": var(--bs-secondary),
  "danger": var(--bs-danger),
  // 其他颜色对应添加
);

// 你的自定义类覆盖
...

@import "~bootstrap";

@import "dark-mode";

这样编译后，所有基于$theme-colors生成的组件样式（包括outline按钮）都会使用var(--bs-*)变量，深色模式下修改这些变量就能直接生效。

方案二：单独覆盖Outline按钮的Sass变量 #

如果你不想改动全局$theme-colors的结构，可以针对性覆盖生成outline按钮样式的Sass变量，强制它们使用CSS变量：

在app.scss中，导入Bootstrap之前添加以下代码：

$enable-css-variables: true;

$theme-colors: (
  "primary": #1037C4,
  "secondary": /* 你的浅色secondary值 */,
  "danger": /* 你的浅色danger值 */,
  // 其他颜色
);

// 遍历主题颜色，覆盖outline按钮的相关Sass变量
@each $color, $value in $theme-colors {
  $css-var: --bs-#{$color};
  $btn-outline-color: var(#{$css-var});
  
  $btn-outline-#{$color}-color: $btn-outline-color;
  $btn-outline-#{$color}-border-color: $btn-outline-color;
  $btn-outline-#{$color}-hover-bg: var(#{$css-var});
  $btn-outline-#{$color}-hover-border-color: var(#{$css-var});
}

// 你的自定义类覆盖
...

@import "~bootstrap";

@import "dark-mode";

这段代码会自动为每个主题颜色的outline按钮设置对应的CSS变量引用，编译后的样式就不会是硬编码颜色，深色模式的变量覆盖就能生效。

验证要点 #

• 确保dark-mode.scss中的变量名拼写正确，比如--bs-secondary对应组件使用的变量；
• 编译后检查浏览器开发者工具，查看.btn-outline-secondary的color、border-color等属性是否是var(--bs-secondary)，而非固定色值。

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