0

I've created a drawer element with Tailwind CSS & Flowbite. While the backdrop is good (simple gray) on light mode, it's a mix of gray and blue on dark mode, which doesn't fit the theme at all. Does anybody know how to change the backdrop color? I couldn't find any solutions for this besides turning the backdrop completely off.

There is already one topic on Stack Overflow about it, but it doesn't help, sadly.

Any hints? Thanks for helping!

<div id="drawer-navigation" class="fixed top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white w-80 dark:bg-zinc-800" tabindex="-1" aria-labelledby="drawer-navigation-label">[ELEMENTS INSIDE]</div>

Completely looked through the documentation of Flowbite, used Google and Stack Overflow.

Mauric3
  • 11
  • 3

2 Answers2

0

In tailwindcss there are multiple breakpoint ex: dark. The dark breakpoint define the css when darkmode is active

<div class="fixed top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white w-80 dark:bg-zinc-800" tabindex="-1" aria-labelledby="drawer-navigation-label">
  [ELEMENTS INSIDE]
</div>

The div background is white by default defined by the bg-white class, but is the darkmode is active there is an extra class on it dark:bg-zinc-800 defined by the dark breakpoint.

If you want to change the background on the dark theme you need to change the class defined by the dark breakpoint, in this case the dark:bg-zinc-800 class anyway you want.

Telexx
  • 420
  • 2
  • 11
  • 1
    It's not about changing the color of the drawer itself, it's about the backdrop (opacity on the whole website when the drawer is shown). – Mauric3 Mar 27 '23 at 13:08
0

Try it?

    <html lang="en" className="dark">
Nunchakus
  • 1
  • 1