navbar-dark 仅设置文字图标为浅色，必须与 bg-dark 等背景类配对使用；混用 data-bs-theme 会导致样式冲突；深色导航栏需同时加 navbar-dark + bg-dark，浅色则用 navbar-light + bg-light。
直接改 data-bs-theme 不会影响单个导航栏的深浅切换——它控制的是全局主题，和 navbar-dark / navbar-light 是两套独立机制。混用反而导致文字消失、背景错乱、响应式菜单图标不可见。
navbar-dark 和 navbar-light 必须与 bg-* 类配对使用
navbar-dark 本身不设背景色，只负责把内部文字、图标、折叠按钮设为浅色；bg-dark 才提供深色背景。两者缺一不可。
- 深色导航栏：同时加
navbar-dark+bg-dark（或自定义深色类） - 浅色导航栏：同时加
navbar-light+bg-light（或bg-white、bg-primary等） - 删掉所有干扰类：
data-bs-theme="dark"、bg-body-tertiary、navbar-expand-lg漏写也会让小屏菜单不展开
自定义深色背景时文字颜色可能不够亮
用 #1a1d22 这类偏灰黑背景时，navbar-dark 默认的 --bs-navbar-color（通常是 #fff）在低亮度屏幕下仍可能发灰。不能只靠覆盖 a.nav-link。
- 优先改 CSS 变量：
style="--bs-navbar-color: #e9ecef;"，它会统一影响.navbar-brand、.nav-link、.navbar-toggler-icon - 别漏掉
.navbar-toggler边框：默认是rgba(255,255,255,.1)，在深背景上几乎看不见，需显式设为border-color: rgba(255,255,255,.3) - 移动端弹出菜单的背景和文字仍需单独控制，
.navbar-collapse不继承父级navbar-dark
Vue 3 中动态切换要避免 class 绑定冲突
用 :class 绑定 navbar-dark / navbar-light 时，如果同时写了 data-bs-theme="dark"，CSS 优先级会打架，导致类被忽略或样式错乱。
- 只用响应式类管理：例如
:class="['navbar', isDark ? 'navbar-dark bg-dark' : 'navbar-light bg-light']" - 确保组件作用域隔离，不要在根实例或全局逻辑里操作导航栏类名
- 移除模板中硬编码的
data-bs-theme属性——它和局部导航栏主题无关
最易被忽略的是：navbar-dark 的语义只管“文字可读”，不管“背景颜色”；而很多人以为加了它就自动变黑，结果只看到白字飘在默认浅灰背景上——那不是失效，是根本没配对 bg-dark。
