Granular control for dark mode

[SPAHI4]

I set up dark theme with .dark selector, TW v3
Is there a way to reset the child component's mode back to light if one of parents is .dark?

[wongjn]

You could use :not() with some arbitrary indicator of "light" mode, like a light class name: https://play.tailwindcss.com/2pg1Qscsg2

[SPAHI4]

BTW with this example, the third rectangle should be painted with green as the closest parent has `.dark`, no?

[wongjn]

great idea, thanks! is that possible with v3?

Oops sorry, misread your post a little. Here's a v3 version: https://play.tailwindcss.com/JXDT7SEgr6?file=config

BTW with this example, the third rectangle should be painted with green as the closest parent has .dark, no?

I wouldn't think so. This still fullfils your initial specification since light is a parent of the element. There was no specification about the relative depths of the light or dark parents.

[adamwathan]

The only way this is even possible in CSS is with style queries which are still sort of early in terms of browser support 😕 That's the only CSS feature that does the whole "nearest parent" thing the way you want I'm afraid.

[wongjn]

Ah, I was hurting my head trying to figure it out if it was possible :S

[SPAHI4]

Thanks. I'm thinking how I can implement such feature, as using variants like dark:... is great, but it looks like I have no choice but to use normal classes and toggle them manually