直接改bg-*类仅设背景色，必须同步处理文字色、图标色、下拉菜单背景及移动端折叠态背景共4处，否则深色屏、safari或小屏下将出现灰字、白底菜单或消失的三横线。
bg-*` 类能快速换背景，但文字、图标、下拉菜单、移动端折叠态会立刻不协调——必须同步处理至少 4 处，否则上线后用户在深色屏、Safari 或小屏下看到的是灰字、白底菜单或消失的三横线。
改导航栏背景色不能只加 bg-dark
Bootstrap 的 bg-dark 只设背景，不自动翻转文字色或图标色。常见失效现象：.navbar-brand 和 .nav-link 在 bg-dark 下变成浅灰（几乎不可读），.navbar-toggler-icon 消失，折叠菜单仍是白底。
- 优先用
bg-dark或bg-primary快速试色，但必须紧接着覆盖文字与图标颜色 - 别用
bg-black：它太暗，.navbar-toggler-icon的默认 stroke 是currentColor，继承父级灰度后完全隐形 - 自定义色值（如
#1a1d22）时，.navbar-dark类完全失效，必须手动干预 CSS 变量或选择器
文字和链接颜色得靠 --bs-navbar-color 或选择器覆盖
改了背景却还是灰字？因为 .navbar-dark .nav-link 在 Bootstrap 源码里硬编码了 color: rgba(255, 255, 255, .75)，它会盖过 --bs-navbar-color 变量。
- 最稳写法是显式覆盖：
.navbar-dark .nav-link { color: #e0e0e0 !important; } - 若用 CSS 变量，必须配合
[data-bs-theme="dark"]限定范围：:root[data-bs-theme="dark"] { --bs-navbar-color: #e0e0e0; } -
.navbar-brand和.navbar-toggler-icon不继承该变量，需单独设：.navbar-dark .navbar-brand, .navbar-dark .navbar-toggler-icon { color: #fff; }
.dropdown-menu 和 .navbar-collapse.show 背景要分开处理
折叠后的“菜单面板”不是 .navbar-collapse 渲染的，它是透明容器。真正显示背景的是 .dropdown-menu（dropdown 模式）或 .navbar-collapse.show（collapse 模式）。
- 确认你用的是哪种模式：
data-bs-toggle="dropdown"→ 改.dropdown-menu；data-bs-toggle="collapse"→ 改.navbar-collapse.show - Bootstrap 5.3+ 可用
--bs-navbar-dropdown-bg，但它只对.dropdown-menu生效，对 collapse 模式无效 - 加
!important很可能绕不过 Bootstrap 的background-color: var(--bs-dropdown-bg)权重，别省
.navbar-toggler-icon 颜色不能靠 color 改
它的三横线是 SVG base64 图标，由 mask + background-color 控制，写 .navbar-toggler { color: red; } 完全无效。
- 正确做法：
.navbar-toggler-icon { background-image: none; mask: url("data:image/svg+xml,..."); background-color: #dc3545; } - 必须同时写
mask和-webkit-mask，否则 Safari 不渲染 - hover 状态要作用于
.navbar-toggler:hover .navbar-toggler-icon，不是只写.navbar-toggler:hover
