<p>Bootstrap 5 的 text- 和 bg- 类绑定 Sass 变量而非固定 HEX 值，应优先按语义使用类名；默认 primary 为 #0d6efd，secondary 为 #6c757d，success 为 #198754，info 为 #0dcaf0，warning 为 #ffc107，danger 为 #dc3545，light 为 #f8f9fa，dark 为 #212529，black/white 为硬编码；text-muted 对应 $gray-600（#6c757d），text-body 等于 $body-color（#212529），text-dark 为 $dark（#343a40）；深色模式下仅 bg-body 等少数类自动切换，其余需手动适配；自定义颜色应扩展 $theme-colors 而非硬写 HEX。</p>
Bootstrap 5 的 text-* 和 bg-* 类不直接等于某个固定 HEX 值，而是绑定 Sass 变量（如 $primary），默认值可查，但自定义主题后会变；硬记 HEX 容易踩坑，应优先按语义用类名，而非反向查色值。
默认 $theme-colors 对应的 HEX 值（5.3+ 官方默认）
这些是未修改 Bootstrap 源码时，text-primary、bg-success 等类实际渲染出的颜色（基于 $theme-colors 映射）：
-
primary:#0d6efd（不是 #007bff，旧版遗留印象要更新） -
secondary:#6c757d（注意不是纯灰 #808080） -
success:#198754（比常见绿色 #28a745 更深更稳） -
info:#0dcaf0（青蓝色，非浅蓝 #17a2b8） -
warning:#ffc107（明黄色，饱和度高，慎用于深色背景） -
danger:#dc3545（非大红 #ff0000，带暗调更易读） -
light:#f8f9fa（极浅灰，bg-light在白底上几乎不可见） -
dark:#212529（接近黑但非 #000，text-dark比text-body更深） -
black:#000（硬编码，不走变量） -
white:#fff（同理，固定值）
text-muted 和 text-body 不是灰色系简单叠加
这两个类最容易被当成“透明度降低”，其实完全不是：
-
text-muted固定对应$gray-600→#6c757d，和opacity无关；加opacity-50会双重变淡，反而失真 -
text-body等于$body-color→ 默认#212529，是正文主色，不是“未设置颜色”的 fallback -
text-dark是$dark→#343a40，比text-body深，别混用 - 没有
text-white-50这种类；要半透明白字，必须组合text-white opacity-50
深色模式下颜色不会自动反转，bg-body 是关键例外
Bootstrap 5 原生支持深色模式，但多数 bg-* 类（如 bg-light、bg-primary）仍按亮色主题渲染，只有少数类响应模式切换：
-
bg-body会随data-bs-theme="dark"切换为#212529（深色正文底色） -
bg-dark始终是#343a40，不响应深色模式 -
text-body在深色模式下仍为#212529，可能和背景同色——此时需显式加text-light或自定义类 - 渐变类如
bg-gradient-primary仅基于$primary计算，深色模式下对比度可能不足，得手动覆盖
想加自定义色？别写死 HEX，走 $theme-colors 扩展
硬加 class="text-navy" 并写 CSS 是下策；正确路径是 Sass 层扩展主题：
- 在自定义 Sass 文件中重定义：
$theme-colors: (navy: #001f3f, gold: #FFD700, ...) - 编译后即可用
text-navy、bg-gold，且自动获得text-navy-emphasis等派生类 - 漏掉
$theme-color-interval会导致深色模式下亮度计算错误（比如text-navy在暗背景下变成不可读的深蓝） - 不要用
!important覆盖内置类——它会破坏主题联动和响应逻辑
真正麻烦的从来不是查 HEX 表，而是假设“类名 = 静态颜色”；一旦项目启用深色模式、定制主题或升级 Bootstrap 版本，所有硬编码色值都会失效。语义类名才是稳定接口，HEX 只该出现在 Sass 变量定义里，而不是 HTML class 属性中。
