bg-light 是 #f8f9fa（极浅灰），非纯白，不响应深色模式，不可替代 bg-body 作全局背景；bg-white 是 #fff，纯白且确定性强，但也不自动适配深色模式。
bg-light 和 bg-white 的色值完全不同
很多人以为 bg-light 就是“浅白色”，实际它在 bootstrap 5 默认主题中是 #f8f9fa（极浅灰），而 bg-white 是严格的 #fff。这个差值看似小，但在深色文字、小字号或高对比度场景下会明显影响可读性——比如 bg-light text-dark 在低分辨率屏上可能 barely pass wcag aa。
验证方式很简单：getComputedStyle(document.querySelector('.bg-light')).backgroundColor 会返回 rgb(248, 249, 250)；bg-white 则是 rgb(255, 255, 255)。
bg-light 在深色模式下不会自动变暗
bg-light 是固定色值类，不参与 Bootstrap 5.3+ 的 data-bs-theme="dark" 响应逻辑。深色模式开启后，它还是 #f8f9fa，和深色背景（如 bg-body 变成 #212529）形成刺眼反差。
- 要用语义化响应类，优先选
bg-body-secondary或bg-body-tertiary，它们背后调用color-contrast()动态适配 -
bg-light+text-body-secondary这种组合在深色模式下大概率失效——因为前者没变，后者却变亮了 - 自定义深色主题时，若保留
bg-light，必须手动重写其 dark-mode 下的声明，否则视觉断裂
bg-light 不等于 “适合做容器底色”
文档里常把 bg-light 当作“安全浅底色”推荐，但它的真正定位是“次级内容区背景”，比如卡片内侧、折叠面板展开区。而真正作为页面/容器默认背景的是 bg-body（默认 #fff 浅色模式，深色模式为 #212529）。
容易踩的坑：
- 误用
bg-light替代bg-body做全局背景 → 深色模式下白底残留，且与navbar、footer色阶不一致 - 叠加
bg-opacity-10后，bg-light透出的是更灰的浅色，而bg-white透出的是纯白底，二者混合父级渐变/图片时表现不同 -
bg-light和text-light组合是无效的：前者是浅灰，后者是白色文本，在浅灰上几乎不可见
什么时候该用 bg-white 而不是 bg-light
明确需要纯白背景时才用 bg-white：比如模态框 .modal-content、卡片 .card 默认背景、导出 PDF 前的打印样式隔离区。它的优势是确定性强、无歧义、兼容所有主题变量。
但注意：
-
bg-white在深色模式下仍是#fff，不会自动翻转 → 若需深色模式下也保持“最浅可用背景”，得配合媒体查询或 JS 切换 - 不要用
bg-white+text-white—— 这是隐形文字，除非你加了阴影或 border -
bg-white和bg-transparent行为不同：bg-transparent会透出父级背景图/渐变，bg-white则完全遮盖
