只加 data-bs-theme="dark" 导航栏仍为白色，因其仅重置全局 css 变量（如 --bs-body-bg），不干预 .navbar 语义类逻辑；必须同时添加 navbar-dark（控制文字/图标色）和 bg-dark（控制背景色 #212529）才能正确显示深色导航栏。
只加 data-bs-theme="dark" 导航栏还是白的
因为 data-bs-theme="dark" 仅重置 CSS 变量（如 --bs-body-bg），但不干预 .navbar 的语义类逻辑。导航栏是否变深，完全取决于你显式写的类名，而非 HTML 属性。
常见错误现象：页面其他组件（.card、.btn）已正确变暗，唯独导航栏背景仍是白色、文字发灰、汉堡图标不可见。
-
navbar-dark控制文字/图标/折叠按钮颜色（设置--bs-navbar-color等） -
bg-dark控制导航栏本体背景色（固定值#212529，非变量驱动） - 二者缺一不可，且必须同时加在
<nav></nav>元素上 - 绝对不要用
bg-black替代bg-dark：对比度不足，OLED 屏上图标边缘糊
navbar-dark 和 bg-dark 必须成对出现
它们职责正交：navbar-dark 不改背景，bg-dark 不调文字色。漏掉任一个，都会导致可读性崩溃——比如只加 navbar-dark，文字变白但背景仍白，直接看不见。
移动端尤其容易翻车：折叠菜单弹出后，.navbar-collapse 容器默认透明，子元素（如 .navbar-nav 或 .dropdown-menu）若没额外加 bg-dark，就会露出底下浅色 body，视觉断裂。
- 检查开发者工具中
<nav></nav>的background-color和color是否生效 - 折叠态下需手动给
.navbar-collapse.show或其子容器加bg-dark - 别依赖
data-bs-theme="dark"自动传导到子组件；局部样式必须靠类名显式控制
动态切换时 data-bs-theme 和类名不能混用
Vue/React 项目里最常犯的错：把全局主题和局部 navbar 样式当成同一套机制来回切。结果是属性和类名打架，优先级混乱，文字黑底深、或白字配白底。
正确分层逻辑：
- 全局主题（影响
.card、.form-control等）→ 只动document.documentElement.dataset.bsTheme，并调用bootstrap.Theme.getOrCreateInstance(document.documentElement).update() - 局部 navbar 样式 → 用响应式 class 绑定，例如：
:class="{ 'navbar-dark': isDark, 'navbar-light': !isDark }"+:class="{ 'bg-dark': isDark, 'bg-light': !isDark }" - 禁止在同一个
<nav></nav>上同时写data-bs-theme="dark"和navbar-light—— 后者会覆盖前者对文字色的影响，造成黑字深底
自定义深色背景时 .navbar-toggler 边框消失
默认 .navbar-toggler 边框色是 rgba(255,255,255,.1)，在 #121418 这类极深背景上完全隐形。这不是 bug，是 Bootstrap 假设你用的是标准 bg-dark（#343a40）。
修复要点不在“加边框”，而在“重设可见性”：
- 必须同步改
.navbar-toggler的border-color（建议用rgba(255,255,255,.2)起步） - 更要改
.navbar-toggler-icon的 SVGfill：它继承currentColor，而父级文字色由navbar-dark控制，若背景太深，白色图标仍可能发虚 - 若用 CSS 变量覆盖，需确保自定义样式在 Bootstrap CSS 之后加载，否则被覆盖
最隐蔽的坑是：你以为改了 --bs-navbar-bg 就万事大吉，但它只作用于导航栏本体，折叠菜单背景由 --bs-navbar-dropdown-bg 或 .navbar-collapse.show 的 background-color 单独控制。
