Automatic dark mode

[JamesHemery]

Hi,

I was thinking of the possibility of providing two tailwind configurations when using the create method, in order to provide two different color profiles and thus automate dark mode management without having to constantly specify the dark modifier.

What do you think about it ?

Thanks,

[jaredh159]

it's an intriguing idea, but my first reaction is that it might not belong in the core library.

if you were trying to write once for both dark mode and light mode, i could see that getting really confusing. would you use colors like bg-blue-100 and then that would get silently remapped behind the scenes to bg-blue-900? it feels a little un-tailwind-y to me. but i could be missing how you're imagining the implementation.

could you sketch out some sample code of how you would write the utilities with this approach so i could understand better?

[JamesHemery]

The first solution I've think without impacting the core of the library was simply to create two tw instances. The problem is that, as we currently use the tw instance directly in the components, it's difficult to switch the instance between dark and light modes.

In this way, users can vary the colors as they wish between dark and light mode.

Here too, the problem can be solved by retrieving the instance from a useTw hook (whether or not it comes from the library), which would return a different instance depending on the mode and trigger a re-render.

Finally a problem similar to #112 (re-render problem)

I'll make a POC with the reproduction repo next week :)