1

So in tailwind, im using the flowbite library, and trying to show different versions of the logo SVG depending on wether the theme is light or dark.

Currently i can only make the dark version be hidden, but when i try light:hidden it doesen't really work? Does anyone know how to solve this.

    <Navbar.Brand href="/">
      <img
        alt=""
        src="/images/logo-light.svg"
        className="dark:hidden mr-3 h-6 sm:h-8 block w-auto"
      />
      <img
        alt=""
        src="/images/logo-dark.svg"
        className="light:hidden mr-3 h-6 sm:h-8 block w-auto"
      />
    </Navbar.Brand>
Sermad NaJar
  • 135
  • 1
  • 5
  • 15

1 Answers1

2

There is no light in tailwind

The combination of hidden dark:block will hide the element by default and display it when the dark mode is activated

<Navbar.Brand href="/">
  <img
    alt=""
    src="/images/logo-light.svg"
    className="dark:hidden mr-3 h-6 sm:h-8 block w-auto"
  />
  <img
    alt=""
    src="/images/logo-dark.svg"
    className="hidden dark:block mr-3 h-6 sm:h-8 block w-auto"
  />
</Navbar.Brand>;
Konrad
  • 21,590
  • 4
  • 28
  • 64