pacocoursey / next-themes

Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing

Home Page:https://next-themes-example.vercel.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

MichaelAllenWarner opened this issue · comments

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.