Allow nested providers

[shekharkhedekar]

I've got cases (stories in storybook) where I want to have multiple ThemeProviders
e.g.

// Top level storybook theme
<ThemeProvider forcedTheme="light">

   // Individual Story
    <ThemeProvider forcedTheme="light">
        // LIGHT VERSION OF COMPONENT
    </ThemeProvider>
    <ThemeProvider forcedTheme="dark">
        // DARK VERSION OF COMPONENT
    </ThemeProvider>
</ThemeProvider>

This currently does not work because of this code.

Currently, I'm forking your package and removing those lines to allow for nested providers. I'm also adding a component to add the theme class on container of the provider if the forcedTheme is set so the children will get the correct styles.

Not sure if this contradicts your original design, but it would be useful to us.

[shrekuu]

Hi @shekharkhedekar , I am using next-themes with TailwindCSS. It seems I can simply achieve nested themes like this:

1. I add some config in Tailwind config:

import plugin from 'tailwindcss/plugin';

export default {
  darkMode: 'class',
  plugins: [  
    plugin(function ({ addUtilities }) {
      const utilities = {
        // light, dark color scheme
        '.light': {
          'color-scheme': 'light',
        },
        '.dark': {
          'color-scheme': 'dark',
        },
      };
      addUtilities(utilities);
    }),
  ],
};

Then I can simply use this light or dark in any element like this:

'use client';

export default function Page() {
  return (
    <div className="border border-red-400 p-2">
      <h1>default theme</h1>
      <input type="text" />
      <div className="border border-red-400 p-2 light">
        <h1>light</h1>
        <input type="text" />
        <div className="border border-red-400 p-2 dark">
          <h1>dark</h1>
          <input type="text" />
          <div className="border border-red-400 p-2 light">
            <h1>light</h1>
            <input type="text" />
          </div>
        </div>
      </div>
    </div>
  );
}

When I toggle the theme to light in next-themes, the nested dark section stays dark. Cool! This is just what I wanted.

In my app, I am forcing it to use dark theme by default in my outermost layout.tsx file.

<NextThemesProvider defaultTheme="dark" attribute="class">
...
</NextThemesProvider>

[shekharkhedekar]

@shrekuu we we're doing that as well, but we also needed to reference resolvedTheme in the nested theme, which always referenced the top level theme and produced inaccurate results.