Overriding light/dark mode for a sub-tree of the document

[jamesbvaughan]

I'm working on a project that uses the class strategy for manually controlling light/dark mode and then using Tailwind prefixes (as in classNames="dark:bg-black-100 bg-white"). We have a few components that implement dark and light styling, but there are some contexts where we want them to always be in light mode, regardless of whether the rest of the app is in light mode.

I could implement this by setting light and dark styles manually (classNames={darkMode ? "bg-black-100" : "bg-white"}), but these are complex components with many descendants that would also need to be updated.

I think that the ideal solution for my use case would be to have a light class that I could apply at any point in the tree, and all descendant nodes would use light mode styling, overriding the surrounding document's theme.

Is this something that's already possible? If not, would it be a reasonable feature to add?

Thank you!

[wongjn]

You could consider using a Tailwind plugin that creates a variant that behaves like class darkMode but has an exception for a .light parent class like:

addVariant('foo', '.dark &:not(.light *)');

Tailwind Play Example

[jamesbvaughan]

Thanks! That could certainly work.

It would still require updating class names in a large number of components, which is something I'm hoping to avoid here if possible.

I'll hold out a bit for other suggestions but may end up going with this one.

What do you think about having this functionality build into Tailwind?

[wongjn]

I have no opinion on having this functionality build into Tailwind – I'll leave it to people more clever than me to evaluate it.