要让 bg-primary 变浅且保持组件颜色一致，必须修改 Sass 变量 $primary（如设为 #8a2be2）并同步调整 $primary-rgb、$theme-color-interval（建议设为 10），再重编译 Bootstrap 源码；仅改 CSS 或工具类无效。
直接改 $primary 变量再重编译，不是调 bg-primary 类的 CSS
改 bg-primary 类本身没用——它只是个工具类，背后颜色来自 Sass 变量 $primary。你手动写 .bg-primary { background-color: #e0d6ff !important; } 看似变浅了，但 .btn-primary、.border-primary、.text-primary 还是深色，组件间颜色不一致，且 hover / disabled 状态容易崩。
真正要让 bg-primary 变浅，得换掉源头：$primary 本身设成更亮的值，比如 #8a2be2 或 #6a5acd，然后重编译整个 Bootstrap。
- 必须用 Sass 源码（
node_modules/bootstrap/scss/），CDN 引入的 CSS 无法触发变量重算 - 变量重定义必须在
@import "bootstrap/scss/bootstrap"之前，顺序错就无效 - 别只改
$primary—— 同时设$primary-rgb（如138, 43, 226），否则部分函数（如color-contrast()）会 fallback 到默认蓝
$theme-color-interval 必须同步调小，否则 text-primary 会糊成一片
bg-primary 变浅后，text-primary 默认仍按旧 $primary 暗化 20%，结果文字太深、对比度暴跌。这不是 bug，是 shade-color($primary, 20%) 的计算逻辑没适配新色值。
解决办法是把 $theme-color-interval 从默认 20 改小，比如设为 10：
$primary: #8a2be2; $theme-color-interval: 10; @import "bootstrap/scss/bootstrap";
- 不设这个，
text-primary在浅底上可能只剩灰影，WCAG AA 直接不达标 - 如果还嫌文字不够亮，可额外覆盖
$primary-text-emphasis（Bootstrap 5.3+ 支持） - 改完立刻检查
.text-primary元素的 computed color，确认是否落在可读区间（#333 以上或 #fff 附近）
不想重编译？用 CSS 变量临时覆盖 --bs-bg-primary，但仅限局部
Bootstrap 5.3+ 开始，bg-primary 工具类底层已转为读取 CSS 变量 --bs-bg-primary。如果你项目已升级且无法动 Sass 构建流程，可尝试：
:root {
--bs-bg-primary: #e0d6ff;
}
- 必须确保这段 CSS 在 Bootstrap 的 CSS 之后加载，否则会被覆盖
- 这只影响
bg-primary，btn-primary仍走自己的变量--bs-btn-primary-bg，需单独设 - 深色模式下该变量不自动切换，得加媒体查询：
@media (prefers-color-scheme: dark) { :root { --bs-bg-primary: #4a309c; } } - 不推荐长期用——CSS 变量无法驱动
text-primary的暗化逻辑，语义断裂
最常被忽略的一点：改 $primary 后所有衍生组件都变，但对比度未必合规
进度条填充、Alert 边框、Form-range track、Toast 标题栏……全跟着 $primary 变。但浅紫色 #8a2be2 在白色背景上对 .text-primary 是够的，放到灰色卡片（bg-body-secondary）上可能就看不清了。
别只盯着 bg-primary 本身——打开 DevTools，挨个点开 .alert-primary、.progress-bar.bg-primary、.list-group-item.active，看 computed color 和 contrast ratio。尤其注意小字号文案（如 badge、form-label），WCAG AA 要求至少 4.5:1。
