[v4] Dark theme following system preference

[xdanielc]

So, there's various ways to have a dark theme, in my case I tried using the color-scheme meta tag, that easily follows the system preferences, but if I want to ovewrite it, I have to add, as the docs mention @custom-variant dark (&:where(.dark, .dark *));
However, adding that, will break the default system theme. In case is not clear, here's a video.

https://youtu.be/VQiLiMalUpQ

[adamwathan]

To support the system preference + the ability to manually override, you need to use JS and the matchMedia() API:

https://tailwindcss.com/docs/dark-mode#with-system-theme-support

[xdanielc]

I might sound like making stuff up, but I remember using something else a couple of days back trying to precisely avoid matchMedia() API, (and I was on v4), in fact I realized on the same day cause I was changing things in another project, I though I got it and was easy, so I deleted the test project I did.
I tried to made sure everything worked, after lots of trial and error, I swear it did, but maybe some theme variant never worked.

Despite using js already for the buttons, I felt like not using that API, anyway, you win, I'll add an event listener for when you change the OS/browser preference.