Menu
I have a site built using Tailwind CSS, designed almost entirely in dark mode.
Since I use Radix Colors (via windy-radix-palette), which adapt automatically in light/dark mode, I'm switching the entire site to dark mode using the 'class' strategy in Tailwind CSS, by applying the dark class to my body tag:
<body class="dark">
However, there are certain small sections in the website where I'd like to switch to light mode.
Tailwind CSS allows any element to switch to dark mode using the dark class, but a corresponding light or not-dark class does not seem to exist, which would allow me to switch to light mode in certain places, on a site that's designed to be mostly dark by default.
How can I force light mode on certain elements that are situated inside a dark parent?
Something like this would be ideal:
<div class="not-dark>
907
you could try with forcing the color-scheme in css
/* force light if dark */
@media (prefers-color-scheme: dark) {
.element {
color-scheme: dark;
}
}
answered Jul 08 '26 10:07
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With