Documentation out of date with Tailwind's new dark-mode API

[MichaelAllenWarner]

Tailwind recently changed their dark-mode API:

• The default "media" strategy remains unchanged.
• The "class" strategy (mentioned in the next-themes README) still exists for backward-compatibility, and under the hood it still does addVariant('dark', `:is(${selector} &)`).
• The new "selector" strategy is meant to replace the "class" strategy going forward. It behaves similarly, but it has reduced specificity and is a little more flexible: addVariant('dark', `&:where(${selector}, ${selector} *)`).
• The new "variant" strategy allows for total customization of the dark: variant: addVariant('dark', selector).

The new strategies aren't yet documented on the Tailwind website, but they were shipped in v. 3.4.1. (A slightly different version shipped in 3.4.0, but it had problems.)

The README for this repository should probably be updated accordingly.

[joshuawootonn]

You could just ... update the README.md?

Might just update it if I figure it out 👿

[joshuawootonn]

I missed this before but looks like someone already has a proposal for the README.md update.

Here is the commit I used to move from the media strategy to the selector strategy with this library if this can help anyone.

[trm217]

I really don't care for this attitude @joshuawootonn. As you can see there is an open PR for the documentation changes (in the thread above your first comment).
Paco (the code-owner) has been unreaponsive for many months and thus no changes/fixes have been merged for quite some time, as they'd need his approval.

[joshuawootonn]

Fair enough. I was in a spicy late night mood. Not helpful especially since the maintainer isn't responding. Sorry y'all. Probably wouldn't have posted normally. It just felt like an easy change.

Thanks for contributing the update though. Hope it get's merged soon!

[renchris]

I also had to include a localStorage.theme value for this to work. Would we be able to add this to the documentation as well?

// On page load or when changing themes, best to add inline in `head` to avoid FOUC
document.documentElement.classList.toggle(
  'dark',
  localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
)

// Whenever the user explicitly chooses light mode
localStorage.theme = 'light'

// Whenever the user explicitly chooses dark mode
localStorage.theme = 'dark'

// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem('theme')

Supporting system preference and manual selection