导航栏需同时添加 navbar-dark 和 bg-dark 类才能正确变暗，缺一不可；仅设 data-bs-theme="dark" 不生效，还需为 .navbar-collapse、下拉菜单等显式设置深色背景及对应变量。
只加 data-bs-theme="dark" 导航栏还是白的？
因为 data-bs-theme="dark" 仅重置全局 CSS 变量（如 --bs-body-bg），但不干预 .navbar 的语义类逻辑。导航栏是否变深，完全取决于你显式写的类，而不是根节点属性。
常见错误现象：页面其他组件（.card、.btn）已变暗，但导航栏仍是白底黑字。
-
navbar-dark控制文字、图标、折叠按钮颜色（--bs-navbar-color、--bs-navbar-toggler-icon-bg等） -
bg-dark控制背景色（固定值#212529，非变量动态生成） - 二者缺一不可——漏掉
bg-dark，背景不生效；漏掉navbar-dark，文字/图标发灰不可读 - 别用
bg-black替代bg-dark：前者太深，navbar-dark的白色文字对比度不足，OLED 屏上图标边缘易糊
移动端折叠菜单弹出后还是白底？
默认情况下，.navbar-collapse 容器本身透明，其子元素（如 .navbar-nav 或 .dropdown-menu）使用浅色背景，导致视觉断裂。
- 必须显式给
.navbar-collapse添加bg-dark类，或在展开态加样式：.navbar-collapse.show { background-color: #212529; } - 若用下拉菜单（
.dropdown），还需覆盖--bs-navbar-dropdown-bg变量，否则下拉项仍为白底 - 检查开发者工具中实际渲染的元素：是
.navbar-collapse自身，还是其内部的.dropdown-menu在显色？路径不同，修复点也不同
自定义深色背景时文字发灰或图标看不见？
Bootstrap 的 navbar-dark 是为标准 bg-dark（#212529）设计的。换成更暗（如 #121418）或偏蓝的自定义色后，原有文字色和图标色可能对比度崩塌。
- 优先用 CSS 变量覆盖：
:root[data-bs-theme="dark"] { --bs-navbar-color: #e0e0e0; --bs-navbar-toggler-icon-bg: #ffffff; } - 别直接写
.navbar-dark a { color: #fff; }：会漏掉.navbar-brand和.navbar-toggler-icon的 SVG 填充色 -
.navbar-toggler默认边框色是rgba(255,255,255,.1)，在极深背景上隐形——需单独调亮其border-color - 验证时务必切到移动端视图，检查折叠态下所有文字、图标、边框是否清晰可辨
动态切换主题时导航栏没反应？
Vue/React 项目里常把 data-bs-theme 和 navbar-dark 当成同一套机制来回切换，这是错的。它们分属不同层级，不能混用。
- 局部导航栏样式 → 用响应式 class 绑定：
:class="{ 'navbar-dark': isDark, 'navbar-light': !isDark }"+:class="{ 'bg-dark': isDark, 'bg-light': !isDark }" - 绝对禁止在同一个
<nav>上同时写data-bs-theme="dark"和navbar-light bg-light：后者类名优先级更高，结果是黑字配深背景，直接不可读 - 如果用了 Bootstrap 的 JS 主题管理（
bootstrap.Theme），切换后必须立刻调用.update()，否则 CSS 变量不会重算
最易被忽略的是：深色模式下，导航栏不是“整体变暗”一件事，而是背景、文字、图标、折叠容器、下拉菜单、边框共六个可独立控制的视觉层。少调一层，就可能在某个设备或状态下失效。
