Bootstrap 5中深浅色及多主题的最优实现方式是什么？

1. 深浅主题的标准实现逻辑 #

Bootstrap 5.3及以上版本已经内置了深色模式支持，不需要完全从零实现，正确的实现方式是SCSS变量自定义 + JS切换配合，二者结合是最优方案，不需要单独写dark.css全量覆盖原有样式。

• SCSS层面：通过修改Bootstrap自带的主题变量来定义深浅主题的配色，不需要覆盖原有类，避免样式冲突。你可以自定义$dark-mode-colors、$light-mode-colors等变量，编译后Bootstrap会自动生成对应data-bs-theme属性的样式规则。
• JS层面：只需要切换根元素的data-bs-theme属性值即可，不需要手动给每个元素切换bg-dark、bg-light类。Bootstrap的所有组件都会自动识别这个属性的值，适配对应主题的配色。

2. 具体实现步骤 #

基础深浅主题实现 #

1. 如果你用SCSS编译的方式，首先引入Bootstrap的SCSS源文件，自定义主题变量：

// 自定义浅色主题变量
$primary: #0d6efd;
$secondary: #6c757d;
// 自定义深色主题变量
$dark-theme-colors: (
  "primary": #3d8bfd,
  "secondary": #adb5bd,
  "body-bg": #212529,
  "body-color": #f8f9fa
);
// 启用Bootstrap内置深色模式支持
$enable-dark-mode: true;
// 引入Bootstrap源文件
@import "bootstrap/scss/bootstrap";

2. JS部分做主题切换，只需要操作根元素属性即可：

// 切换到深色主题
document.documentElement.setAttribute('data-bs-theme', 'dark');
// 切换到浅色主题
document.documentElement.setAttribute('data-bs-theme', 'light');
// 也可以读取系统主题自动设置
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.setAttribute('data-bs-theme', 'dark');
}

多主题扩展方案 #

如果需要实现除深浅之外的更多主题（比如蓝色主题、橙色主题等），只需要在SCSS中扩展自定义主题的变量映射即可：

$custom-themes: (
  "blue": (
    "primary": #0a58ca,
    "body-bg": #f0f8ff,
    "body-color": #052c65
  ),
  "orange": (
    "primary": #fd7e14,
    "body-bg": #fff4e6,
    "body-color": #5c370a
  )
);
// 把自定义主题合并到Bootstrap的主题列表里
$themes: map-merge($themes, $custom-themes);

之后JS切换的时候直接把data-bs-theme的值改成对应的主题名即可，所有Bootstrap组件会自动适配新主题的配色。

3. 常见误区说明 #

• 不需要单独创建dark.css文件覆盖原有样式，这种方式维护成本极高，容易出现样式漏改、冲突的问题，用内置的data-bs-theme方案是官方推荐的标准实现。
• 不需要手动给页面元素切换bg-dark、text-light这类类名，Bootstrap的全局样式和组件都会根据根元素的主题属性自动适配对应样式，只有特殊的自定义模块需要单独适配的情况才需要额外写主题相关的样式。
• 如果使用的是预编译的Bootstrap CSS文件，没有用SCSS编译的条件，也可以直接通过CSS变量覆盖的方式自定义主题，在:root[data-bs-theme="dark"]选择器下覆盖对应的CSS变量即可。

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