text-primary在深色模式下不自动变亮是设计，不是bug；它使用静态色值，不响应data-bs-theme="dark"，需改用text-body类或调整$theme-color-interval确保可读性。
text-primary在深色模式下不自动变亮是设计，不是bug
Bootstrap 的 text-primary 类使用的是静态色值，它不会随 data-bs-theme="dark" 自动调整亮度。比如你设 $primary: #6a5acd，那么 text-primary 就固定是 shade-color($primary, 20%) 算出的某个灰紫色——在深色背景上很可能只剩 3.2:1 对比度，肉眼难以分辨。
这不是漏适配，而是 Bootstrap 明确区分了“品牌语义色”和“可读语义色”。真正响应深色模式的是 text-body-primary 这类类名，它们背后调用 color-contrast() 动态计算出符合 WCAG AA 的文字色。
- 别给
text-primary加媒体查询覆盖：它没预留钩子，且会破坏整个 Sass 主题系统 - 检查实际渲染值：打开 DevTools，选中一个
text-primary元素，看 computed color 是多少，别只信变量名 - 关键文案优先换用
text-body或text-body-secondary，它们在深色下自动切到#f8f9fa
改了$primary但没调$theme-color-interval，暗色下全糊了
修改 $primary 后必须同步设置 $theme-color-interval，否则所有依赖它的派生色都会错乱。例如 text-primary、border-primary、progress-bar-bg 都基于 shade-color() 和 tint-color() 计算，而这两个函数默认按 20% 步长操作——如果你的新主色饱和度高（如 #ff6b35），20% 一暗就发灰，再一暗直接不可读。
$theme-color-interval: 10 是较安全的起点，能让浅色文字在深底上保持足够明度，也避免深色文字在浅底上过黑。
- 不设
$theme-color-interval，Sass 编译时仍用默认 20%，导致text-primary实际是#d9b3ff而非你预期的可读灰 - CDN 引入的 CSS 无法生效：必须基于 Sass 源码重编译，硬覆盖
.text-primary属于打补丁，升级后易失效 - 改完变量后，务必检查 Alert、Toast、Form-range track 等组件的实际对比度，它们都隐式依赖这套逻辑
shadow-sm不是文字阴影，加了反而更糊
shadow-sm 是作用于盒模型的 box-shadow，它在元素外围画一层投影，对文字本身无任何增强。把 shadow-sm 加在 上，阴影围在标题块外，文字边缘依然发虚——尤其当背景是深色渐变或图片时，可读性反而下降。
真正起作用的是 text-shadow，它直接作用于字体渲染层，和 color 同级。推荐写法：text-shadow: 0 1px 2px rgba(0,0,0,0.3)，在深色背景上能立刻提升边缘清晰度。
- 别用
filter: drop-shadow()替代：它会关闭抗锯齿，Chrome 下小字号文字边缘毛刺明显 - 单位必须用
rem：用px会导致缩放失配，大屏像描边，小屏看不见 - Windows 高对比度模式下
text-shadow会被浏览器忽略——这是 WCAG 合规行为，不能依赖它传递关键信息
模态窗里文字模糊，大概率是transform没对齐像素
Bootstrap 模态窗默认用 transform: translate(-50%, -50%) 居中，但百分比计算可能落在亚像素位置，触发浏览器的 grayscale 字体渲染路径（尤其 Chrome 35+），导致文字边缘发虚、发灰。
最直接的修复是强制凑整：用 calc(-50% + 0.5px) 把偏移量拉回整数像素线，让浏览器启用 sub-pixel 渲染。
- 只需加在
.modal-dialog上：transform: translate(0, calc(-50% + 0.5px)) - 不要只写
transform，补全-webkit-transform和-ms-transform保证兼容性 - 这个现象在真机上比桌面更明显，尤其是非 Retina 的 Windows 笔记本屏幕
字体模糊和文字看不清，表面是颜色或阴影问题，底层常是渲染路径切换、亚像素错位、或语义类误用。最容易被忽略的，是以为 text-primary 天然适配深色模式——它根本不适配，得换人。
