如何为现有Bootstrap 5导航栏设置自定义颜色？

• 导航栏类名中同时添加了Bootstrap原生的bg-dark深色背景类和自定义navbar-custom类，Bootstrap自带样式优先级更高，你的自定义背景色被原生样式覆盖
• 搭配的navbar-light类是为浅色背景设计的文本、图标配色规则，和bg-dark深色背景类本身逻辑不匹配，也会导致后续样式适配异常

1. 首先移除nav标签里的bg-dark类，消除原生背景样式的覆盖影响
2. 根据你自定义的背景色深浅调整配色匹配类：自定义背景为浅色系保留navbar-light即可，自定义背景为深色系则把navbar-light替换为navbar-dark，保证导航栏内的文字、图标配色和背景适配
3. 给navbar-custom类配置背景色样式，若依然存在优先级问题可添加!important强制生效，示例CSS如下：

.navbar-custom {
    background-color: #替换为你需要的自定义色值;
    /* 样式不生效时可启用下面这行 */
    /* background-color: #替换为你需要的自定义色值 !important; */
}

4. 修改后的导航栏代码参考：

<!-- 浅色系自定义背景使用该代码 -->
<nav class="navbar navbar-light navbar-custom"></nav>

<!-- 深色系自定义背景使用该代码 -->
<nav class="navbar navbar-dark navbar-custom"></nav>

内容的提问来源于stack exchange，提问作者Kalyan Sundar