Bootstrap 5.3.0切换data-bs-theme时无法覆盖primary颜色求助

使用Bootstrap v5.3.0时，想要通过修改data-bs-theme属性自定义主题并覆盖primary颜色，但尝试后未生效。编写的_variable-theme2.scss文件代码如下：

$theme2: #5191FF;

@include color-mode(theme2) {

  --bs-primary: #{$theme2};
  --bs-primary-rgb: #{to-rgb($theme2)};

}

通过网页检查器发现，为theme2作用域声明的两个CSS变量被:root[data-bs-theme="light"]的样式覆盖了。

补充：尝试过以下代码，仅对指定组件作用域有效，但需要逐个覆盖所有使用primary主题色的组件，并非最优方案：

$theme2: #5191FF;

@include color-mode(theme2) {

  .btn-primary{
    --bs-btn-bg: #{$theme2};
    --bs-border-color: #{$theme2};
    --bs-btn-hover-bg: #{lighten($theme2, 20%)};
    --bs-btn-hover-border-color: #{lighten($theme2, 20%)};
  }

}

解决方法 #

1. 调整样式加载顺序 #

自定义主题SCSS文件必须在引入Bootstrap核心SCSS之后编译，确保自定义变量的优先级高于Bootstrap默认样式。

2. 提升自定义变量的选择器优先级 #

Bootstrap默认主题的样式绑定在:root[data-bs-theme="light"]上，优先级高于[data-bs-theme="theme2"]。需要在color-mode混入内部将变量声明在:root选择器下，提升优先级：

$theme2: #5191FF;

@include color-mode(theme2) {
  :root {
    --bs-primary: #{$theme2};
    --bs-primary-rgb: #{to-rgb($theme2)};
    // 统一覆盖依赖primary的组件变量，无需逐个组件修改
    --bs-btn-bg: #{$theme2};
    --bs-btn-border-color: #{$theme2};
    --bs-btn-hover-bg: #{lighten($theme2, 20%)};
    --bs-btn-hover-border-color: #{lighten($theme2, 20%)};
    // 可根据需求添加其他组件的primary相关变量，如alert、card等
  }
}

3. 确认颜色模式支持启用 #

检查Bootstrap配置变量$enable-color-mode，确保其值为true（默认启用），否则color-mode混入不会生成对应的主题样式。

4. 验证编译结果 #

编译后查看生成的CSS，确认自定义主题样式的选择器为：

[data-bs-theme="theme2"]:root {
  --bs-primary: #5191FF;
  --bs-primary-rgb: 81, 145, 255;
  /* 其他自定义变量 */
}

该选择器优先级高于默认的:root[data-bs-theme="light"]，可成功覆盖primary颜色变量。

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