应避免直接修改 .bg-info 类，推荐新建语义化类（如 .bg-indigo-600）或通过 Sass 重定义 $info 变量；若用 CSS 变量，须同步更新 --bs-alert-bg 等关联变量，并配合 prefers-color-scheme 或 data-bs-theme 实现深色模式适配。
直接改 .bg-info 类会导致全局污染
Bootstrap 5 的 .bg-info 是预设类，对应 --bs-info-bg 变量，默认值是浅蓝色（#d1ecf1）。如果你在 CSS 里直接重写 .bg-info { background-color: #2563eb; }，所有用到 .bg-info 的地方都会变——包括 Alert、Badge、Progress 等组件，极易引发意料外的样式断裂。
更稳妥的做法是：不碰原生类名，新建一个语义清晰的类，比如 .bg-indigo-600，只在你需要的地方显式使用。
- 避免覆盖
.bg-info，哪怕加!important也不推荐 - 如果项目已大量使用
.bg-info且必须统一换色，应通过 Sass 重定义$info变量后重新编译 CSS - 运行时用
style或 JS 动态设置背景色，优先级高于.bg-info，但会丢失响应式和主题适配能力
--bs-info-bg 变量只影响 .bg-info，不影响其他组件逻辑
这个变量是纯“皮肤层”开关，改了它，.bg-info 背景色会变，但 .alert-info 的边框、文字色、图标颜色不会自动同步——因为 Alert 组件内部用的是独立变量：--bs-alert-bg、--bs-alert-border-color、--bs-alert-color。
所以单改 --bs-info-bg 后，你可能看到一个背景是深蓝、边框还是浅蓝、文字发灰的 Alert，视觉割裂。
- 要完整替换 info 主题，得同步改
--bs-alert-bg、--bs-alert-border-color、--bs-alert-color和--bs-badge-bg等关联变量 - 所有这些变量都在
:root下声明，确保你的自定义 CSS 在 Bootstrap CSS 之后加载 - 检查浏览器开发者工具的 Computed 面板，确认变量是否被成功继承，而不是回退到 Bootstrap 默认值
用 CSS 变量实现深色模式下自动切换背景色
单纯把 --bs-info-bg 设成 #2563eb 是静态的。用户切到深色系统时，这个蓝色可能刺眼或对比度不足。真正可用的方案是用媒体查询配合变量重定义。
例如：
:root {
--bs-info-bg: #dbeafe; /* 浅色模式：indigo-100 */
}
@media (prefers-color-scheme: dark) {
:root {
--bs-info-bg: #4f46e5; /* 深色模式：indigo-600 */
}
}这样 .bg-info 会随系统自动切换，无需 JS 干预。
- 别漏掉
:root前缀，否则变量作用域不对 - 深色模式下的值建议选饱和度稍高、亮度适中的蓝（如
#4f46e5），避免用纯黑背景+纯白文字那种极端对比 - 如果项目用了
data-bs-theme="dark"手动切换主题，就得额外加一条[data-bs-theme="dark"]规则，不能只靠prefers-color-scheme
自定义背景色类比改变量更轻量、更可控
多数场景下，你其实只需要在某几个卡片或区块里用一次自定义蓝，没必要动全局变量或编译 Sass。直接写一个新类最省事：
.bg-custom-blue {
background-color: #2563eb !important;
}然后在 HTML 中用：<div class="bg-custom-blue text-white p-3">内容</div>。
- 加
!important是为了压过 Bootstrap 原生类可能存在的多层嵌套权重（比如.card .bg-info） - 务必搭配
.text-white或其他文本色类，因为#2563eb对比度高，黑色文字可读性差 - 如果需要响应式背景（比如移动端换浅色），可以用
@media (max-width: 768px)单独覆盖该类
实际改起来最常被忽略的一点：自定义背景色后，边框、阴影、内边距等配套样式往往没同步调整，导致元素“浮”在页面上或边缘模糊。颜色只是表层，视觉平衡才是关键。
