bootstrap 5 不提供开箱即用的配色方案，所有配色必须通过 sass 变量重写实现，需在入口 scss 中于导入 bootstrap 前重定义 $primary 等基础色、$theme-colors map 及衍生变量，并用 map-merge 安全扩展颜色。
Bootstrap 5 没有“现成配色方案”可一键切换
它不提供类似 bootstrap-theme-dark.css 或 theme-purple.min.js 这类开箱即用的配色包。所有颜色输出都来自编译时的 Sass 变量，不是运行时加载的 CSS 文件或 JS 配置。所谓“现成方案”，实际指社区打包好的 _variables.scss 覆盖文件，或你本地重写的变量集。
- 试图通过
<link rel="stylesheet" href="bootstrap-purple.css">切换主题？不存在这种官方文件 - 在 HTML 里加
data-bs-theme="purple"？这个属性只控制深色/浅色模式（light/dark），和自定义色盘完全无关 - npm 安装
bootstrap-themes类库？多数是 v4 兼容产物，v5 中因移除 jQuery 和重构变量体系已失效
扩展 theme-colors map 是添加新配色的唯一可靠路径
想让 bg-primary 变成紫色、新增 bg-indigo 类，必须修改 $theme-colors 这个 Sass map，并确保在 @import "bootstrap/scss/bootstrap" 前完成重写。否则新增颜色不会生成对应工具类。
- 正确顺序：先
@import "bootstrap/scss/functions"→ 再重定义$theme-colors→ 最后@import "bootstrap/scss/bootstrap" - 必须用
map-merge($theme-colors, ("indigo": #4b0082))，不能直接赋值$theme-colors: ("indigo": #4b0082)，否则会丢失primary、success等默认色 - 别漏掉衍生变量：
$indigo-rgb、$indigo-text-emphasis等需手动计算并声明，否则text-indigo或border-indigo无法生效 - 新增颜色后，
bg-indigo、text-indigo、bg-gradient-indigo才会真正编译出来
用 CSS 自定义属性（CSS vars）临时改色效果有限
CSS 变量如 --bs-primary 只影响部分组件（比如 .btn-primary 的背景），但不会触发新工具类生成，也不能改变 bg-primary 的底层实现逻辑——因为该类是编译期静态生成的。
-
:root { --bs-primary: #6a0dad; }能让按钮变紫，但bg-primary仍用旧的#0d6efd（除非你同时覆盖了.bg-primary的 background-color） - 对
bg-gradient-primary无效：它的渐变色由background-image: linear-gradient(...)写死，不读取 CSS 变量 - 无法扩展新颜色名：设
--bs-indigo不会自动产出bg-indigo类，Sass 编译器根本不知道这个变量存在 - 适合场景：微调单页内少量组件色调，或配合 JS 动态切换深色/浅色模式
第三方主题包（如 bootswatch）本质仍是 Sass 重写
像 bootswatch 提供的 cyborg、lux 主题，下载的是完整 bootstrap.min.css，背后是他们用 Sass 重写了全部变量再编译的结果。你无法在运行时“加载”它，只能替换整个 CSS 文件。
- 优点：免去自己写变量的麻烦，设计统一，适配过 Bootstrap 5 的所有组件
- 缺点：体积比原版大 10–20%，更新依赖滞后（bootswatch 适配 v5.3.2 可能比官方晚两周）
- 若你项目已用 Sass 构建流程，直接复制其
_variables.scss片段进你的入口文件更轻量，不必引入整套 CSS - 注意 license：部分 bootswatch 主题用 MIT，但个别定制版可能含额外限制
