改汉堡图标颜色需重写 .navbar-toggler-icon 的 background-image，用 URL 编码后的 SVG base64 字符串，通过 stroke 属性设色；filter 或 color 无效，因图标是背景图而非文本元素。
Bootstrap 5 汉堡图标颜色怎么改？
直接改 .navbar-toggler-icon 的背景图 SVG 颜色最可靠，CSS filter 或 color 对默认图标无效——因为 Bootstrap 5 默认用的是 base64 编码的 SVG，不是纯色元素。
修改 .navbar-toggler-icon 的 background-image
Bootstrap 5 的汉堡图标本质是 CSS 背景图（base64 SVG），必须重写 background-image 才能换色。推荐用在线 SVG 转 base64 工具生成新图标，或手写简洁 SVG：
svg {
width: 1em;
height: 1em;
fill: #ff6b35; /* 改这里控制颜色 */
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
<path d="M5 8h20M5 15h20M5 22h20"/>
</svg>转成 base64 后，覆盖原样式：
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ff6b35' stroke-width='2.5' stroke-linecap='round' d='M5 8h20M5 15h20M5 22h20'/%3E%3C/svg%3E");
}- 务必对 SVG 中的
#、、<code>>等字符做 URL 编码（%23,%3C,%3E） - 用
stroke属性控制线条颜色，别用fill（三条横线是<path>不是<rect>） - 如果用 SCSS，可用
escape-svg()函数自动编码
为什么 filter: invert() 或 color 不起作用？
因为 .navbar-toggler-icon 是背景图，不是可继承文本色的内联元素。常见误操作：
-
.navbar-toggler { color: red; }→ 无效，图标不响应文本色 -
.navbar-toggler-icon { filter: brightness(0) invert(1); }→ 可能反色但不可控，且在深色模式下出错 - 试图用
background-color盖住图标 → 图标是透明底 SVG，会透出背景色，造成视觉污染
适配深色模式时要注意什么？
如果项目启用了 data-bs-theme="dark" 或自定义深色类，不能只靠媒体查询，得用属性选择器精准覆盖：
[data-bs-theme="dark"] .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3Csvg...stroke='%23ffffff'...%3E");
}
/* 或更稳妥：用 class 控制 */
.navbar-dark .navbar-toggler-icon {
background-image: url("...");
}- Bootstrap 5.3+ 推荐用
data-bs-theme，但旧版仍依赖.navbar-dark类 - 避免用
@media (prefers-color-scheme: dark)，它无法感知手动切换的主题 - 图标颜色要和对应主题下的
.navbar背景色有足够对比度，否则看不见
改 SVG base64 是唯一稳定可控的方式，其他“捷径”在不同版本或主题下大概率失效。
