Bootstrap 5 用 --bs- 前缀 CSS 变量替代 Bootstrap 4 硬编码 Sass 变量，实现运行时主题定制、深色模式支持及灰阶标准化，迁移时须优先设置 --bs-body-color 和 --bs-body-bg。
Bootstrap 4 的颜色类前缀是 text- 和 bg-，但语义不统一
Bootstrap 4 用固定前缀区分文本色和背景色，比如 text-primary、bg-success。但问题在于：没有统一的命名根（如 color-primary），且无法通过 CSS 变量直接覆盖——所有颜色值都硬编码在 Sass 变量里，修改需重新编译。
常见踩坑点：
- 想改
$primary却发现部分组件（如btn-outline-primary）用了派生色（lighten($primary, 20%)），导致实际生效颜色和变量值不一致 -
text-muted实际对应$gray-600，但名字里没体现灰阶层级，调试时得翻源码查映射 - 深色模式支持为零，所有颜色类都是单色系，无法响应
prefers-color-scheme
Bootstrap 5 改用 --bs- 前缀的 CSS 自定义属性，结构清晰
Bootstrap 5 把核心颜色全部暴露为 :root 下的 CSS 变量，命名规则统一为 --bs-{category}-{name}，例如：--bs-primary、--bs-gray-600、--bs-body-color。这些变量被直接用于所有内置类（text-primary 最终 translate 到 color: var(--bs-primary)）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 覆盖颜色只需重定义变量，无需 Sass 编译：
body { --bs-primary: #4a5568; } - 组件级定制更安全：给某个卡片加自定义主题，可只在局部作用域改
--bs-primary，不影响全局 - 灰阶变量（
--bs-gray-100到--bs-gray-900）明确对应亮度梯度，比 Bootstrap 4 的$gray-light/$gray-dark更易预测效果
从 $primary 到 --bs-primary 不只是前缀变化，是设计系统思维升级
Bootstrap 4 的 Sass 变量本质是“构建时常量”，而 Bootstrap 5 的 --bs- 变量是“运行时契约”：它要求所有颜色使用必须经过变量中转，禁用直接写死 #007bff。这带来两个关键影响：
- 深色模式可用媒体查询动态切换：
@media (prefers-color-scheme: dark) { :root { --bs-primary: #6366f1; } } - 第三方组件若遵循同一命名规范（如
--bs-danger），就能天然兼容主题，不用额外适配 - 但要注意：Bootstrap 5 仍保留旧类名（
text-primary），并未引入color-primary这类新类——变量是底层支撑，不是类名替代方案
迁移时最常漏掉的是 --bs-body-color 和 --bs-body-bg
很多人只改了 --bs-primary 就以为主题生效了，结果发现段落文字发灰、表格斑马纹错位。这是因为 Bootstrap 5 默认文本色和背景色不再由 $body-color 等 Sass 变量决定，而是强依赖这两个根变量：
-
--bs-body-color控制p、h1、a等绝大多数文本的默认色 -
--bs-body-bg是body和容器背景的基础值，bg-light类也基于它计算对比度 - 如果未显式设置，它们会 fallback 到浏览器默认值（可能与你的设计稿偏差极大）
真正稳定的主题迁移，必须在 :root 中至少声明这两个变量，再叠加其他色值。否则，看似改了主色，实际页面基底已经漂移。
