Add `useColorMode` function that waits for mount before returning resolved theme about next-themes HOT 4 CLOSED

How is this better than returning undefined, as the hook currently does? It's documented in the README that you need to be careful about hydration mismatch: https://github.com/pacocoursey/next-themes#avoid-hydration-mismatch

from next-themes.

I think returning undefined in useTheme is not really helpful, i cannot use useTheme directly without using first useMount

What about adding an argument defaultTheme to useTheme?

import { useTheme } from 'next-themes'

const ThemeChanger = () => {

  const { theme, setTheme } = useTheme({ defaultTheme: 'light' })

  return (
    <div>
      The current theme is: {theme}
      <button onClick={() => setTheme('light')}>Light Mode</button>
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
    </div>
  )
}

This would make things a lot easier

from next-themes.

If you already know the default theme... why not just use it directly?

const { theme = 'light', setTheme } = useTheme()

This way if theme is undefined, it will become 'light' instead :)

from next-themes.

Closing because I think your use-case should be solved with the above, and I don't think another hook will help here.

from next-themes.