Bootstrap 5.3自定义颜色模式：替换$primary值的实现方法咨询

方法选择 #

你应该使用**data-bs-theme="name"**的方案，原因如下：

• color-mode(name)是Bootstrap底层的Sass混合宏，用于包裹特定主题的样式规则，属于主题的底层实现逻辑；
• data-bs-theme是官方推荐的自定义多主题API，通过给根元素添加该属性即可快速切换整套主题，完全匹配你“创建多个带不同primary颜色的模式”的需求。

具体实现步骤（适配你的Symfony+Webpack Encore配置） #

修改你的assets/styles/components/_bootstrap_custom.scss文件，严格遵循Bootstrap的导入顺序：

1. 在导入Bootstrap函数后，注册自定义主题
   在原代码的第1步之后、第2步默认变量覆盖之前，添加自定义主题的定义：

   // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
   @import "~bootstrap/scss/functions";
   
   // --- 新增：注册自定义颜色模式 ---
   // 定义自定义主题的核心变量
   $custom-theme-primary: #1e407c;
   $custom-theme-body-bg: #d9e0e7; // 可按需调整
   
   // 将自定义主题合并到Bootstrap的颜色模式映射中
   $color-modes: map-merge($color-modes, (
     custom: (
       color: $gray-900,       // 文本色，按需设置
       bg: $custom-theme-body-bg, // 背景色
       primary: $custom-theme-primary, // 替换默认primary颜色
       // 可在此添加其他需要覆盖的变量，比如secondary、success等
     )
   ));
   // --- 新增结束 ---
   
   // 2. Include any default variable overrides here
   $body-bg:         #d9e0e7;
   $link-decoration: none;
   

2. 保持后续导入流程不变
   继续执行原代码中第3到第8步的导入和自定义逻辑即可，Webpack Encore会自动编译生成包含自定义主题的CSS文件。

如何启用自定义主题 #

在HTML的根元素（如<html>或<body>）上添加属性，即可切换到自定义主题：

<html data-bs-theme="custom">

此时所有使用$primary的组件（按钮、导航链接、徽章等）都会自动应用#1e407c颜色。

多主题扩展 #

如果需要创建更多主题，重复主题注册步骤即可：

// 新增第二个主题
$another-theme-primary: #2ecc71;
$color-modes: map-merge($color-modes, (
  another: (
    color: $gray-900,
    bg: #f0f8ff,
    primary: $another-theme-primary,
  )
));

切换时修改data-bs-theme的值为another即可。

主题切换的JS实现 #

如果需要前端动态切换主题，用JavaScript修改根元素的属性即可：

// 切换到自定义主题
document.documentElement.setAttribute('data-bs-theme', 'custom');
// 切回默认浅色主题
document.documentElement.setAttribute('data-bs-theme', 'light');

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