只加 data-bs-theme="dark" 导航栏仍为白色，因其仅重置全局 css 变量，不干预 navbar 语义类逻辑；navbar-dark 控制文字/图标色、bg-dark 控制背景色，二者缺一不可且优先级高于 data-bs-theme 属性。
直接在 上设 data-bs-theme="dark" 就能全局启用深色模式，但仅靠这个无法让导航栏正确显示——navbar-dark 和 bg-dark 必须同时存在，且不能与 data-bs-theme 冲突。
为什么只加 data-bs-theme="dark" 导航栏还是白的
Bootstrap 的 data-bs-theme="dark" 会重置整页 CSS 变量（如 --bs-body-bg），但它不干预 .navbar 的语义类逻辑。导航栏是否显示为深色，取决于你显式写的类，而非主题属性。
-
data-bs-theme="dark"影响的是.card、.btn、.form-control等组件的默认样式，但.navbar是独立渲染路径，必须手动指定navbar-dark bg-dark - 如果同时写了
data-bs-theme="dark"和navbar-light bg-light，后者会覆盖前者对导航栏的影响——类名优先级高于属性驱动的变量 - 检查开发者工具中
.navbar元素计算后的background-color和color，若仍是浅色，说明bg-dark没生效或被其他 CSS 覆盖
navbar-dark + bg-dark 缺一不可
navbar-dark 控制文字、图标、折叠按钮的颜色；bg-dark 控制背景色。二者是正交职责，漏掉任一个都会导致可读性崩溃。
-
navbar-dark设置--bs-navbar-color（链接）、--bs-navbar-brand-color（Logo）、--bs-navbar-toggler-icon-bg（汉堡图标）等变量 -
bg-dark设置background-color: #212529，这是 Bootstrap 5.3+ 定义的固定值，不是由data-bs-theme动态生成的 - 别用
bg-black替代bg-dark：前者背景太深，navbar-dark的白色文字对比度不足，尤其在 OLED 屏上图标边缘易糊 - 移动端折叠菜单弹出后，
.navbar-collapse默认是白底黑字，需额外加bg-dark到该容器上，否则视觉断裂
动态切换时 class 和 data-bs-theme 的协作规则
Vue/React 项目里常犯的错，是把 data-bs-theme 和 navbar-dark 当成同一套机制来回切换——它们不能混用，必须分层控制。
- 全局主题（影响所有组件）→ 只动
document.documentElement.dataset.bsTheme，并调bootstrap.Theme.getOrCreateInstance().update() - 局部导航栏样式 → 用响应式 class 绑定，例如：
:class="{ 'navbar-dark': isDark, 'navbar-light': !isDark }"，配合:class="{ 'bg-dark': isDark, 'bg-light': !isDark }" - 绝对禁止在同一个
<nav></nav>上同时写data-bs-theme="dark"和navbar-light—— 这会导致文字变黑但背景仍深，直接不可读 - 如果用了 Sass 自定义构建，确保
$enable-dark-mode: true已启用，否则navbar-dark的变量可能未注入
自定义深色背景时如何避免文字发灰
用 #1a1d22 这类比 bg-dark 更深的背景色时，navbar-dark 默认的白色文字在低亮度屏幕下依然发灰，必须主动干预颜色变量。
- 推荐方式：内联设置 CSS 变量，
style="--bs-navbar-color: #e9ecef; --bs-navbar-brand-color: #f8f9fa;"，它会统一作用于品牌名、链接、折叠图标 - 不要只改
a.nav-link { color: #fff }：这漏掉了.navbar-brand和.navbar-toggler-icon，后者在深背景上默认是rgba(255,255,255,.5)，几乎看不见 -
.navbar-toggler的边框色默认是rgba(255,255,255,.1)，在#1a1d22上完全隐形，需同步设为rgba(255,255,255,.25) - 真机测试很重要：iOS Safari 对
rgba()透明度渲染偏保守，.1和.15在暗色背景下肉眼难辨，建议最低用.2
最易被忽略的是：导航栏的响应式折叠菜单（.navbar-collapse）从不继承父级 data-bs-theme 或 bg-* 类，它的背景和文字色必须单独控制。哪怕你把整个页面切到深色模式，这个下拉区默认仍是浅色——不手动加 bg-dark，用户点开菜单瞬间就会觉得“断层”。
