Feature Request: Support for storybook about next-themes HOT 6 OPEN

export const globalTypes = {
  theme: {
    name: 'Theme',
    description: 'Global theme for components',
    defaultValue: 'light',
    toolbar: {
      items: ['light', 'dark'],
      showName: true,
      dynamicTitle: true,
    },
  },
};

export const decorators = [withStyle];

import { FC } from 'react';
import { ColorThemeProvider } from 'modules/styleSystem';

export function withStyle(Story: FC, context: any) {
  return (
    <ColorThemeProvider forcedTheme={context.globals.theme}>
        <Story />
    </ColorThemeProvider>
  );
}

import { PropsWithChildren } from 'react';
import { ThemeProvider as NextThemeProvider } from 'next-themes';

export const ColorThemeProvider = ({
  forcedTheme,
  ...props
}: PropsWithChildren<{ forcedTheme?: 'light' | 'dark' }>) => {
  return (
    <NextThemeProvider themes={['light', 'dark']} {...(forcedTheme ? { forcedTheme } : {})}>
      {props.children}
    </NextThemeProvider>
  );
};

// ThemeChanger.tsx
import React from "react";
import { useTheme } from "next-themes";
import { useEffect } from "react";

const ThemeChanger = ({ theme }: { theme: "light" | "dark" }) => {
    const { setTheme } = useTheme();

    useEffect(() => {
        setTheme(theme);
    }, [setTheme, theme]);

    return null;
};

export default React.memo(ThemeChanger);

// preview.js
import React from 'react';
import { ThemeProvider } from "next-themes";
import ThemeChanger from './ThemeChanger';

export const decorators = [
    (Story, { globals }) => (
        <ThemeProvider>
            <ThemeChanger
                theme={
                    globals?.backgrounds?.value == null ||
                    globals.backgrounds.value === "#F8F8F8"
                        ? "light"
                        : "dark"
                }
            />
            <Story />
        </ThemeProvider>
    ),
];

export const parameters = {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
        matchers: {
            color: /(background|color)$/i,
            date: /Date$/,
        },
    },
};

// ThemeChanger.tsx
import React from "react";
import { useTheme } from "next-themes";
import { useEffect } from "react";

const ThemeChanger = ({ theme }: { theme: "modern" | "dark" | "classic" }) => {
  const { setTheme } = useTheme();

  useEffect(() => {
    console.log(theme, "theme");
    setTheme(theme);
  }, [setTheme, theme]);

  return null;
};

export default React.memo(ThemeChanger);

//preview.js
import "../public/static/global-styles.scss";
import { ThemeProvider } from "next-themes";
import ThemeChanger from "./ThemeChanger";

export const globalTypes = {
  theme: {
    name: "Theme",
    description: "Global theme for components",
    defaultValue: "modern",
    toolbar: {
      items: ["modern", "dark", "classic"],
      showName: true,
      dynamicTitle: true,
    },
  },
};

export const decorators = [
  (Story, { globals }) => (
    <ThemeProvider>
      <ThemeChanger theme={globals.theme ? globals.theme : "modern"} />
      <Story />
    </ThemeProvider>
  ),
];

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};