Bootstrap 5.3：fixed-top导航栏适配明暗主题的问题

不需要自定义JS，用Bootstrap 5.3+的原生主题感知类就能解决：

核心方案：替换固定背景类为主题感知类 #

把原来的bg-light替换成以下两个类之一：

• bg-body-tertiary：浅色主题下是#f8f9fa（和原bg-light一致），暗色主题下自动切换为#343a40，贴合导航栏的常见视觉风格
• bg-body：直接继承当前主题的body背景色，完全和页面背景统一

示例代码：

<nav class="navbar fixed-top bg-body-tertiary">
  <!-- 导航栏内容 -->
</nav>

确保主题切换的原生实现 #

只要你是通过Bootstrap原生的data-bs-theme属性切换主题（比如在<html>或<body>标签上设置data-bs-theme="light"/"dark"），上述类就会自动响应主题变化，始终保持导航栏背景不透明，不会出现内容透出的问题。

额外注意 #

• 不要给导航栏添加bg-transparent、opacity这类会导致透明的类
• 确保保留navbar基础类，Bootstrap的导航栏样式依赖这个类

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