Bootstrap的text-*类严格绑定调色板变量，如text-primary对应$primary的暗化版本，不自动响应深色模式；需用text-body等语义化类适配，并通过扩展$theme-colors安全新增颜色。
text-* 类名到底对应哪些颜色
Bootstrap 的 text-primary、text-success 这类类名，不是凭空定义的，而是严格绑定到其调色板变量（如 $primary、$success）上。你在 Sass 中改了 $primary 值，所有用到它的文本色、边框色、按钮背景色都会同步变——但前提是没在 CSS 里硬编码覆盖。
常见错误是：自己写了 .text-blue { color: #0d6efd; }，结果发现和 text-primary 效果一样还多此一举；或者在深色模式下发现文字看不见，因为默认 text-* 类不响应配色模式切换。
-
text-muted对应的是$gray-600（不是灰色最浅那个），常被误当成“禁用态”，其实它只是语义上的“次要信息” -
text-body是正文默认色，值等于$body-color，通常为#212529，别和text-dark混——后者是$dark（#343a40），更深 - 没有
text-white-50这种类；半透明白要用text-white配合opacity-50
bg-* 背景色类和 text-* 不是一一映射的
bg-primary 和 text-primary 看起来像一对，但它们的底层变量不同：bg-primary 用的是 $primary，而 text-primary 实际用的是 shade-color($primary, 20%)（Sass 函数生成的稍暗版本）。所以直接把 bg-primary 和 text-primary 一起用，有时对比度不够，尤其在小字号或低分辨率屏上。
更实际的问题是：Bootstrap 默认不提供 bg-light 的反色文字类（比如 text-bg-light），你得自己加，否则白底灰字可能过不了 WCAG AA 对比度检测。
-
bg-body是容器默认背景色（$body-bg），不是白色；bg-white才是纯白（#fff） -
bg-transparent是真透明，但注意它不会清除父级背景图或渐变，只清自身背景色 - 用
bg-gradient时，别叠加bg-*类，后者会覆盖渐变声明
深色模式下这些类默认不自动翻转
Bootstrap 5.3+ 支持 data-bs-theme="dark"，但 text-* 和 bg-* 类本身**不带媒体查询逻辑**。也就是说，text-dark 在深色模式下还是深色，不会自动变亮——它就是个固定色值。
真正响应深色模式的是 text-body-secondary、bg-body-secondary 这类“语义化”类，它们背后用了 color-contrast() 函数动态计算可读性足够的颜色。
- 要适配深色模式，优先用
text-body/text-body-secondary，而不是text-dark/text-muted -
bg-body在深色模式下会变成#212529，而bg-dark始终是#343a40，别混淆 - 自定义主题时，必须重定义
$theme-colors和$theme-color-interval，否则深色模式下的text-*亮度计算会失准
如何安全扩展自己的颜色类
别直接复制 text-primary 的写法去新增 text-brand，Bootstrap 的颜色工具类是靠 @each 循环生成的，硬加一个类容易漏掉 hover/focus/active 状态，也不支持响应式前缀（如 text-sm-primary）。
正确做法是往 $theme-colors map 里加键值对，然后重新编译 CSS。如果你用的是 CDN 或预编译版，那就只能手写完整规则集，且必须包含所有状态伪类。
- 新增颜色后，记得同步加进
$theme-color-interval，否则text-*的明暗变体（如text-primary-emphasis）不会生成 - 不要用
!important覆盖原生类，会导致后续升级时样式冲突难排查 - 如果只是临时用，用内联
style="color: var(--bs-primary);"比硬塞新类更可控
实际项目里最容易被忽略的，是 text-* 类在表单控件（如 input、select）里的继承行为——它们不自动应用，得手动加类，或者靠 form-control 自带的样式接管。
