Solution for Make gradient in dark mode `background-image` work with simple background `background-color` in light mode in Tailwind CSS?
is Given Below:
I have a
div with class
bg-blue-100 text-blue-900 dark:bg-info where
linear-gradient(to right, hsla(240, 100%, 50%, 0.2), transparent 50%)
I get the light mode working fine but
dark:bg-info doesn’t work as it uses
background-image CSS property rather than
background-color CSS property for light mode.
How do I make the dark mode work? There is a conflict between
background-image in Dark Mode &
background-color in Light Mode.
How to solve it?
I’ve made a Stackblitz demo showing the problem -> https://stackblitz.com/edit/github-6frqvs-tqnsnl?file=pages%2Findex.tsx
Open in New Window as Tailwind Dark Mode doesn’t show side-by-side on Stackblitz.
Notice, how it doesn’t show blue gradient on Dark Mode despite the code being:
<div className="p-4 m-4 h-20 w-96 bg-red-400 text-red-900 dark:bg-info">Hello hi</div>
I’ve managed to make Dark Mode work on Tailwind Play so here’s the demo -> https://play.tailwindcss.com/fecClyOaIZ
Check only the 1st box. 2nd box is a demonstration of how it must really look in Dark Mode.
In Dark Mode, the 1st box should look like dark blue with a black gradient (see 2nd box)
Light Mode (1st box looks correct in light mode)
Dark Mode (1st box looks incorrect in dark mode. Should actually look like 2nd box)
The trick is to use
dark:bg-transparent as CSS allows
background-image at the same time.
<div class="h-screen m-0 p-0 dark:bg-black"> <div class="flex flex-col justify-center items-center mx-20 text-center h-full"> <div class="px-4 py-4 rounded-md bg-pink-100 text-pink-900 dark:bg-info dark:bg-transparent dark:text-white">This shouldn't look like this in Dark Mode</div> <button id="toggleDark" class="inline-flex justify-center px-4 py-2 text-sm font-medium mt-8 text-green-900 bg-green-100 border border-transparent rounded-md hover:bg-green-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500" onclick="document.documentElement.classList.toggle('dark');">Toggle Dark Mode</button> <div class="px-4 py-4 rounded-md dark:bg-info mt-8 dark:text-white">It should look like this in Dark Mode</div> </div> </div>
Tailwind Play -> https://play.tailwindcss.com/ZWl7ZBwqnQ