Allow for completely overriding (and/or disabling) the core dark: variant.

[MichaelAllenWarner]

I think it should be possible to write a completely custom dark: variant, but right now addVariant('dark', /* ... */) does nothing (presumably because the core dark: definition is applied after custom variants are registered).

My present motivation is making a "progressively enhanced" dark mode, where the base mechanism relies on @media (prefers-color-scheme: dark), but where an attribute/class-based mechanism (with higher precedence) is added on top of that if JavaScript is enabled. The trouble is that the available configuration options for dark: aren't up to the task, and I can't override the core dark: variant with custom selectors. I could define a separate variant like dark-mode: that does what I want, but since I can't disable dark:, developers are bound to accidentally use the latter instead of the former.

If the TW team were amenable to the idea, I might be able to find time to contribute here.

[MichaelAllenWarner]

If I'm not mistaken, simply moving variantPlugins['darkVariants'] from afterVariants to beforeVariants here would allow for a fully custom addVariant('dark', /* ... */). Is that right? And if so, is there any compelling reason not to?

[MichaelAllenWarner]

Another thought is something like what I've proposed here for the aria- variant definitions: add an advanced option for the dark: variant setting, where the user can supply an entirely custom selector or array of selectors with the & syntax (as if they were supplying the second parameter of an addVariant() plugin, which is indeed what's happening in the code).

[olets]

Already possible: set darkMode: null and then add your custom variant

https://play.tailwindcss.com/NrRJTh1bQn?file=config

[dario-baumberger]

You're right. I didn't notice in my local stack because it's JS not TS. So null is the only correct solution

[olets]

Tailwind 3.4.1 added true support for this via the "variant" dark mode strategy 🎉

darkMode: ["variant", ['@media (prefers-color-scheme: dark) { & }']]

https://play.tailwindcss.com/wBTUzgxVYF

[VinceBT-BG]

Ty @olets, works greatly with darkMode: ['variant', [':is(.dark &):not(.light &)']] !

[zimoo354]

@VinceBT-BG how did you achieved it? I cannot make it work 😕

[MichaelAllenWarner]

@zimoo354 It's documented here (but you need to be using Tailwind 3.4.1+): https://tailwindcss.com/docs/dark-mode#overriding-the-dark-variant