[Readme] Clear up hydration issue explanation

[GionnyBanana]

In the readme you write that you need to be sure you are on client side to apply logic related to the themes.
I think you could add a section explaining that you can avoid that client side check if you use this library with something like tailwind, which has light and dark: theme classes always in the components so the server and client code is not mismatched.

Just use data attributes to set your theme.

• Use @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); in your globals.css
• Instruct next-theme to use data-theme as well by adding attribute="data-theme" to the ThemeProvider.

In this way you won't have hydration errors, because your classes never change and next-themes will simply modify the top data-theme to change your app theme. (Again, your components will have to use the dark: tailwind pattern for dark theme colors)

[youngburi]

It seems to still generate the hydration error, but with data-attributes instead of classes.
data-theme="dark" style={{color-scheme:"dark"}}

[GionnyBanana]

Mmh that's weird, I don't see hydration errors on my side. Are you sure you followed my steps correctly? 🤔
It shouldn't give hydration errors because the data attribute should be the same on server and on client at the start, then the user can change it by changing the theme in client side. Thedark: parts in the tailwind classes is the same regardless of the chosen theme