使用Tailwind+Flowbite时明暗主题切换Logo SVG失效问题求助

问题出在Tailwind CSS默认没有light:前缀的变体类——浅色主题是框架的默认状态，只有深色模式会用到dark:前缀来覆盖样式。你写的light:hidden是无效类，自然起不到隐藏浅色Logo的作用。

直接调整样式逻辑就能解决：

• 让浅色Logo默认显示，深色模式下隐藏
• 让深色Logo默认隐藏，深色模式下显示

修改后的代码如下：

<Navbar.Brand href="/">
  <img
    alt="浅色Logo"
    src="/images/logo-light.svg"
    className="mr-3 h-6 sm:h-8 block w-auto dark:hidden"
  />
  <img
    alt="深色Logo"
    src="/images/logo-dark.svg"
    className="mr-3 h-6 sm:h-8 hidden w-auto dark:block"
  />
</Navbar.Brand>

补充说明 #

Tailwind的深色模式是通过给根元素添加dark类触发的，默认状态（无dark类）就是浅色主题。所以不需要额外的light:前缀，用基础的block/hidden控制默认显示，dark:前缀控制深色模式下的切换即可。

如果你的项目自定义了多主题（比如不止明暗两种），需要在tailwind.config.js中手动启用light变体，但绝大多数默认场景下，上面的方案就能完美解决你的问题。

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