Navbar-toggler 默认颜色改不了，是因为其图标由 .navbar-toggler-icon 伪元素通过 SVG background-image 渲染，不响应 color；需重写 mask + background-color 或替换 base64 SVG 中的 stroke 颜色，并同步处理 hover/focus 状态及主题类配对。
Navbar-toggler 默认颜色为什么改不了
Bootstrap 的 .navbar-toggler 默认没有显式设置 color 或 background-color，它靠继承父容器（如 .navbar-light 或 .navbar-dark）的文本色和背景透明度来呈现。所以直接写 .navbar-toggler { color: red; } 往往无效——不是没生效，而是被更高权重的伪元素或子图标覆盖了。
关键点在于：toggler 图标由 .navbar-toggler-icon 渲染，它本质是一个 SVG 或 background-image，不响应 color；而边框、背景、悬停态都需单独控制。
-
.navbar-toggler控制按钮整体（含 padding、border、hover 背景） -
.navbar-toggler-icon控制三横线图标的颜色（用background-image或mask） - 深色/浅色模式下，
.navbar-light会让 toggler 默认为深灰，.navbar-dark会设为白色——但这个逻辑只在初始加载时生效，动态切换需同步更新类名
修改 toggler 图标颜色（SVG 方式）
Bootstrap 5.3+ 默认用 SVG base64 编码渲染 .navbar-toggler-icon，要改颜色，不能靠 color，得重写 background-image，并确保使用 mask + background-color 组合（更可控）：
.navbar-toggler-icon {
background-image: none;
mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,0,0,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,0,0,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
background-color: #dc3545; /* 这里才是图标实际颜色 */
width: 1.5em;
height: 1.5em;
}说明：
- 把
stroke='rgba%280,0,0,1%29'中的0,0,0换成你想要的 RGB 值（如220,53,69），URL 编码后填入 - 必须保留
mask和-webkit-mask，否则 Safari 不兼容 -
background-color是最终显示色，mask只负责“镂空形状”
悬停和焦点状态怎么加效果
移动端虽无 hover，但真机上长按、触屏聚焦仍会触发 :hover 和 :focus（尤其在调试时）。别漏掉这些状态，否则体验割裂：
.navbar-toggler:hover,
.navbar-toggler:focus {
background-color: #007bff !important;
border-color: #0056b3 !important;
}
.navbar-toggler:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}注意：
- 加
!important是因为 Bootstrap 内置的.navbar-toggler:focus规则权重高 - 如果用了
data-bs-toggle="collapse"，确保.navbar-collapse没有 overflow: hidden 裁剪掉 focus outline - 在 iOS Safari 上，有时需额外加
-webkit-tap-highlight-color: transparent;消除点击灰块
Vue / React 等框架中动态改色的坑
在 Vue 3 或 React（如 react-bootstrap）中绑定 toggler 颜色时，常见错误是只改了组件 props，却没同步更新 .navbar-light/.navbar-dark 类或 data-bs-theme 属性：
-
data-bs-theme="dark"是全局主题开关，会强制覆盖所有 navbar 子元素样式，不要用于单个导航栏的主题切换 - 正确做法是：用响应式 class 绑定，例如
:class="{ 'navbar-dark': isDark, 'navbar-light': !isDark }"，并确保同时切换bg-dark/bg-light和.navbar-toggler的配色逻辑 - 如果 toggler 图标颜色随主题变，建议把上面的
mask方案封装成 CSS 变量，例如：--toggler-icon-color: #fff;，再在 :root 或组件 scoped style 中动态更新
最易被忽略的一点：改完图标颜色后，务必检查折叠菜单展开时的阴影、边框、文字对比度是否依然可读——toggler 只是入口，整个导航交互链不能断。
