light/dark mode by changing class names on html tag about next-themes HOT 2 CLOSED

I figured out the issue! The trick was to realize that themes themselves can be thought of as an enum with values = light, dark and system – these don't change (loosely speaking). All that can change is the class (or data attribute) they map to.

Given this, here's the configuration that worked for me (the value prop provides the correct mapping from theme to theme class):

<ThemesProvider
  attribute="class"
  defaultTheme="system"
  enableSystem
  value={{ light: 'theme-light', dark: 'theme-dark' }}
  {...props}
>
  {children}
</ThemesProvider>

Also it's important to use the values light, dark and system when setting the theme (not theme-light & theme-dark that I was using before):

setTheme('light' | 'dark' | 'system');

I think the docs would be clearer if we had better value examples (the one in this section shows only one value and it's for a somewhat different use case). Happy to create a PR if it will be helpful.

from next-themes.

I think this is described quite well here

from next-themes.