如何在Bootstrap SASS中配置适配明暗双模式的自定义配色方案

你当前直接在:root.dark内定义SCSS变量的方式无法生效，因为SCSS是预编译语言，变量会在编译阶段直接替换为固定色值，无法在运行时根据根类动态切换。你需要结合CSS自定义属性实现动态配色切换，具体操作步骤如下：

步骤1：调整colors.scss配置 #

同时定义深浅两套配色的CSS变量，用于运行时动态覆盖：

// 浅色模式默认色值
$primary:#065FC6;
$secondary:#263C5C;
$success:#49C96D;
$danger:#FD7972;
$warning:#FF965D;
$light:#F8F8F8;
$body-color: #263C5C;

$custom-colors: (
  "brd-default": $body-color
);

// 注册全局浅色模式CSS变量
:root {
  --bs-primary: #{$primary};
  --bs-secondary: #{$secondary};
  --bs-success: #{$success};
  --bs-danger: #{$danger};
  --bs-warning: #{$warning};
  --bs-light: #{$light};
  --bs-body-color: #{$body-color};
  --bs-brd-default: #{$body-color};
}

// 注册深色模式覆盖变量
:root.dark {
  --bs-primary: #012345;
  --bs-secondary: #111111;
  --bs-success: #222222;
  // 按需补充其他深色模式色值，所有Bootstrap内置的`--bs-`前缀变量都可以在此覆盖
  --bs-body-bg: #121212;
  --bs-body-color: #ffffff;
}

步骤2：调整styles.scss导入规则 #

让Bootstrap内置变量绑定到你定义的CSS变量，实现全组件适配：

// 先导入自定义颜色配置
@import "./colors";
// 导入Bootstrap基础依赖
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

// 覆盖Bootstrap默认变量，绑定到自定义CSS变量
$primary: var(--bs-primary);
$secondary: var(--bs-secondary);
$success: var(--bs-success);
$danger: var(--bs-danger);
$warning: var(--bs-warning);
$light: var(--bs-light);
$body-color: var(--bs-body-color);
$custom-colors: (
  "brd-default": var(--bs-brd-default)
);

// 后续导入Bootstrap工具类和组件
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/bootstrap";

完成配置后，你只需要通过JS给html根元素切换dark类即可实现全局配色切换，所有Bootstrap内置组件和自定义颜色类都会自动适配当前配色方案。如果需要覆盖更多Bootstrap色值，只需要对应新增CSS变量配置即可，无需修改Bootstrap源码。

内容的提问来源于stack exchange，提问作者Muzaffer Kadir Yılmaz