深色模式下输入框文字看不清，需在[data-bs-theme="dark"]中显式设置--bs-body-color和--bs-form-control-color；聚焦阴影需重写--bs-form-control-focus-box-shadow双层结构；占位符须用[data-bs-theme="dark"] .form-control::placeholder提高特异性并确保对比度≥4.5:1。
输入框在深色模式下文字看不清？先检查 --bs-body-color 和 --bs-form-control-color
Bootstrap 5 的 .form-control 默认用 var(--bs-form-control-color) 控制文字颜色，而这个变量又继承自 var(--bs-body-color)。如果你只改了 data-bs-theme="dark" 却没重定义这两个变量，输入框文字很可能还是浅灰（#212529），在深色背景上几乎不可读。
- 必须在
[data-bs-theme="dark"]块里显式设置：--bs-body-color: #e2e8f0、--bs-form-control-color: #f1f5f9 - 别依赖
prefers-color-scheme自动切换——它在安卓 WebView 和旧版 Safari 中不触发，data-bs-theme才是唯一可靠路径 - 用 DevTools 的 “Computed” 面板查
color值，确认它最终解析的是你设的深色值，而不是 fallback 到默认
聚焦光晕还是蓝的？得重写 --bs-form-control-focus-box-shadow 变量
Bootstrap 5 输入框聚焦时靠两层 box-shadow 实现高亮效果，不是改 border-color。深色背景下原生的 rgba(13,110,253,0.25) 会发灰、对比度低，甚至看不见。
- 在
[data-bs-theme="dark"]中覆盖：--bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.3), 0 0 0 0.25rem transparent - 注意第二层
transparent不能省——它用于补偿 border 宽度，漏掉会导致视觉“边框变粗” - 别只调颜色不调透明度：深色背景上
0.3比0.25更稳，iOS Safari 对 rgba 渲染偏保守，devtools 看着 OK 不代表真机一致
占位符文字太淡？用 .form-control::placeholder + data-bs-theme 双重限定
::placeholder 样式在 Bootstrap 5 中被 .form-control::placeholder 规则硬编码为 #6c757d，这个值在深色背景上对比度只有 ~2.1:1，远低于 WCAG 要求的 4.5:1。
- 必须提高选择器特异性，例如：
[data-bs-theme="dark"] .form-control::placeholder - 推荐值：
color: #94a3b8（确保对比度 ≥4.5:1） - 不要加
!important——只要 CSS 在 Bootstrap 主文件之后加载，且选择器足够具体，权重就足够 - 如果用了 Sass 编译项目，优先改
$input-placeholder-color-dark变量，比运行时覆盖更干净
圆角和边框在深色模式下割裂？得同步调整 --bs-border-color 和 --bs-input-border-radius
深色模式下，.form-control 的边框色由 --bs-border-color 控制，但圆角半径仍走默认 --bs-input-border-radius。若只改颜色不调圆角，或圆角值与其他组件（如 .input-group-text）不一致，视觉会断层。
- 在
[data-bs-theme="dark"]中统一设：--bs-border-color: #334155、--bs-input-border-radius: 0.5rem - 若用了
.input-group，还需额外处理子元素圆角逻辑——.input-group-text和.form-control的border-radius必须协同，否则左侧/右侧附加文本处会出现直角突兀 - 所有自定义变量必须在 Bootstrap 官方 CSS 加载之后生效，顺序错了变量就读不到
--bs-form-control-focus-box-shadow 的双层结构和 ::placeholder 选择器的特异性——改了变量却没生效，十有八九卡在这两处。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
