Dark mode?

[maxcountryman]

Hi, I'm coming from windy and with that plugin dark mode "just worked" which as I understand is a feature of Radix.

Unfortunately it doesn't seem like this plugin is a drop-in replacement in that regard.

[mrcaidev]

No, it's not. You have to manually add dark mode classes like bg-gray-1 dark:bg-graydark-1. But yes, it is, if you use component classes like bg-gray-app, which is a shorthand for bg-gray-1 dark:bg-graydark-1, as documented in the README, although not recommended.

This is on purpose because not everyone wants dark mode in every projects. Automatic dark mode may produce unused CSS in these situations.

Besides, this aligns with Tailwind's utility-first approach, where atomic class names are combined to form complex styles.

So after a hard time balancing convenience and flexibility, I personally decided to leave the dark mode classes to the users, who may then gain more granular control.

[maxcountryman]

Well that's a bummer.

That basically means I can't use your plug-in.

[mrcaidev]

Sad. 😥 But there are excellent similar packages around too, some of which surely includes automatic dark mode.

I'm not saying it's wrong to handle dark mode for users, but there are certainly some users who would like to decide the adoption of dark mode by themselves, like they would do in original Tailwind CSS.

Or maybe we can provide a configurable option that lets the user decide whether to enjoy automatic dark mode, which should be enabled by default, and falls back to manual control if specified.

[maxcountryman]

I'm not saying it's wrong to handle dark mode for users, but there are certainly some users who would like to decide the adoption of dark mode by themselves, like they would do in original Tailwind CSS.

This is configurable, it's not forced upon the user. For example, the windy docs outline two options via Tailwind.

Or maybe we can provide a configurable option that lets the user decide whether to enjoy automatic dark mode, which should be enabled by default, and falls back to manual control if specified.

This is how Radix is intended to work as far as I understand.

[mrcaidev]

This is configurable, it's not forced upon the user.

Either class or media, windy is shipping dark classes to the user anyway. But there can be some projects where you only want one variant, like light mode only or dark mode only, right?

[mrcaidev]

One more thing - windy does its magic by injecting css variables with addBase, while this plugin made it with native Tailwind palette.

The two solutions both have their cons: windy may introduce unused css variables into the bundle, and this plugin cannot support automatic dark mode.

Can't seem to be able to find a perfect solution in the current version of Tailwind. So that's something developers have to balance, i.e. automatic dark mode or minimal bundle size.

[erlendtryti]

Since you recently added the config option to disable semantic classes, do you plan on also adding an option to automatically set dark mode?