Bootstrap5深色导航栏下拉菜单背景为黑，如何改为白色？

问题描述 #

使用Bootstrap 5框架时，将dropdown组件放在带有bg-dark类的导航栏内，下拉菜单背景为黑色；但放在导航栏外部时，下拉菜单背景为白色。需要实现深色导航栏内的下拉菜单为白色的效果。

相关代码片段：

<nav class="navbar navbar-expand-lg bg-dark " data-bs-theme="dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="navbar-nav  mb-3">
            <li class="nav-item dropdown ">
                <a class="nav-link dropdown-toggle show" href="#" role="button" data-bs-toggle="dropdown"
                    aria-expanded="true">
                    <i class="bi bi-person-fill"></i>
                </a>
                <ul class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
                    <li><a class="dropdown-item " href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

<ul class="navbar-nav  mb-3">
    <li class="nav-item dropdown ">
        <a class="nav-link dropdown-toggle show" href="#" role="button" data-bs-toggle="dropdown"
            aria-expanded="true">
            <i class="bi bi-person-fill"></i>
        </a>
        <ul class="dropdown-menu " data-bs-popper="static">
            <li><a class="dropdown-item " href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
    </li>
</ul>

差异原因 #

导航栏添加了data-bs-theme="dark"属性，Bootstrap 5的主题系统会让子元素继承该主题设置。下拉菜单作为导航栏的子组件，会自动应用深色主题的样式（背景色为深色）；而导航栏外部的dropdown组件没有继承这个深色主题，使用默认的浅色主题样式，因此背景为白色。

解决方案 #

方法1：强制下拉菜单使用浅色主题 #

给导航栏内的dropdown-menu添加data-bs-theme="light"属性，直接覆盖继承的深色主题：

<ul class="dropdown-menu dropdown-menu-end" data-bs-theme="light" data-bs-popper="static">
    <li><a class="dropdown-item " href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li>
        <hr class="dropdown-divider">
    </li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

方法2：自定义CSS样式覆盖 #

添加自定义CSS，针对深色导航栏内的下拉菜单设置背景色和文本颜色：

.navbar[data-bs-theme="dark"] .dropdown-menu {
    background-color: #ffffff;
    color: #000000;
}

.navbar[data-bs-theme="dark"] .dropdown-item {
    color: #000000;
}

.navbar[data-bs-theme="dark"] .dropdown-item:hover,
.navbar[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: #f8f9fa;
    color: #000000;
}

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