Bootstrap 5.3中如何根据明暗主题反转导航栏背景色？

Bootstrap 5.3本身没有直接提供「反转主题颜色」的内置类，但可以通过两种简单方式实现你要的需求——主题为深色时导航栏用浅色背景，主题为浅色时用深色背景：

方法一：用Bootstrap内置条件类（无额外CSS） #

Bootstrap 5.3支持基于当前主题的条件类前缀，直接在导航栏上组合这些类就能自动切换：

<nav class="navbar light:bg-dark light:text-white dark:bg-light dark:text-dark">
  <!-- 你的导航内容 -->
</nav>

类的作用说明：

• light:bg-dark：当主题为light时，导航栏背景设为深色
• light:text-white：主题为light时，导航栏文字设为白色
• dark:bg-light：当主题为dark时，导航栏背景设为浅色
• dark:text-dark：主题为dark时，导航栏文字设为深色

方法二：自定义反转类（更灵活） #

如果需要复用这个反转逻辑到其他元素，可以自定义一对CSS类，利用Bootstrap的主题变量和属性选择器：

/* 反转背景色的类 */
.bg-body-inverse {
  background-color: var(--bs-body-bg) !important;
}
[data-bs-theme="dark"] .bg-body-inverse {
  background-color: var(--bs-light) !important;
}
[data-bs-theme="light"] .bg-body-inverse {
  background-color: var(--bs-dark) !important;
}

/* 反转文字颜色的类 */
.text-body-inverse {
  color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .text-body-inverse {
  color: var(--bs-dark) !important;
}
[data-bs-theme="light"] .text-body-inverse {
  color: var(--bs-light) !important;
}

然后导航栏直接应用自定义类：

<nav class="navbar text-body-inverse bg-body-inverse">
  <!-- 你的导航内容 -->
</nav>

为什么body-*类达不到效果？ #

bg-body、text-body这类类是跟随当前主题的主体颜色设计的，本身没有反转逻辑，所以无法直接实现你要的「和主体颜色相反」的效果。

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