text-body-secondary在深色模式下不会变黑，因其底层使用color-mix(in srgb, currentColor 45%, transparent)，动态混合当前主题下的currentColor（深色模式为#f8f9fa），生成rgba(248,249,250,0.45)，确保WCAG AA对比度；而text-muted是硬编码$gray-600（#6c757d），在深色背景下几乎不可读。
text-body-secondary 不是“比 text-muted 稍浅一点的灰”，它是 bootstrap 5.3+ 中真正适配深色模式、语义明确、wcag 可达标的辅助文本颜色类——用错地方或混用旧类，很容易在深色主题下直接消失。
为什么 text-body-secondary 在深色模式下不会变黑？
它底层依赖 CSS color-mix(in srgb, currentColor 45%, transparent)，不是写死的十六进制值。当前 currentColor 是深色模式下的 #f8f9fa（浅灰），混合后变成 rgba(248, 249, 250, 0.45)；在浅色模式下，currentColor 是 #212529，混合后是 rgba(33, 37, 41, 0.45)。两种场景下对比度都卡在 WCAG AA 下限附近。
而 text-muted 对应的是硬编码的 $gray-600（#6c757d），在深色背景（#212529）上几乎不可读。
- 必须确保根元素有
data-bs-theme="dark"或系统级prefers-color-scheme: dark生效，否则它只按浅色逻辑计算 - 不支持 IE 和部分老版 Safari（
color-mix()兼容性需查 caniuse） - 不能和
text-white或text-black混搭覆盖——它靠继承currentColor工作，强行设 color 会断掉链路
text-body-secondary 该用在哪些地方？
它专为“视觉退让但语义仍需保留”的文本设计，不是万能“弱化”工具。
- 表单字段下方的提示文字：
<small class="text-body-secondary">密码需包含大小写字母和数字</small> - 卡片/列表项里的元信息：
<span class="text-body-secondary">更新于 2026-04-27</span> - 按钮旁的辅助说明：
<button class="btn btn-primary">提交</button><span class="text-body-secondary ms-2">（数据将加密上传）</span> - 别用在链接上——
a.text-body-secondary默认无 hover 效果，用户无法感知可点击；要加交互请用link-body-emphasis或自定义伪类
和 text-secondary、text-muted 的关键区别
text-secondary 是主题色调色板里的固定色（shade-color($secondary, 20%)），和 bg-secondary 同源，但和背景无关；text-muted 是静态灰；三者完全不互通。
-
text-secondary：适合“次要操作按钮文字”或“标签页未激活态”，颜色固定，不随主题切换 -
text-muted：仅建议用于浅色模式下的禁用态文本（如disabled输入框内提示），深色模式慎用 -
text-body-secondary：唯一一个“自动适配 + 语义清晰 + 对比达标”的组合，但要求 Bootstrap ≥5.3 且启用 CSS 变量支持 - 它们之间没有层级关系：
text-body-secondary不比text-secondary“更次要”，只是用途完全不同
最容易被忽略的一点：如果你用 Sass 自定义了 $body-color，但没同步重定义 $theme-color-interval，text-body-secondary 在深色模式下的亮度计算就会偏移——看起来太亮或太暗，而不是“刚好够看清”。
