Enable Tailwind dark: with data-theme attribute

[rubas]

The Theme Switcher root.html.heex uses the data-theme attribute to toggle between light/dark themes.
Tailwind's dark: variant expects per default a class="dark" though.

This custom variant makes Tailwind's dark: work with data-theme="dark".

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

Without this, the dark: utility will not work, even DaisyUI themes switch correctly.

👉 Reference: https://tailwindcss.com/docs/dark-mode#using-a-data-attribute

[Gazler]

This is how daisyUI recommends doing it too
https://daisyui.com/docs/themes/#how-to-apply-tailwinds-dark-selector-for-specific-themes

[SteffenDE]

Thank you! 🙌🏻