Merge pull request #64 from dots-ui/fix/next-js-theme-classname-mismatch

fix(styling): create Theme Provider that does not use it's own react …

Author: hackr-sh

.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ThemeProvider } from "../src/components/ThemeProvider";
+import { StorybookThemeProvider } from "../src/components/ThemeProvider";
 import type { Preview } from "@storybook/react";
 import {
   ThemeDefaultBackground,
@@ -26,12 +26,12 @@ const preview: Preview = {
   },
   decorators: [
     (Story) => (
-      <ThemeProvider>
+      <StorybookThemeProvider>
         <ThemeDefaultBackground>
           <ToggleThemeButton />
           <Story />
         </ThemeDefaultBackground>
-      </ThemeProvider>
+      </StorybookThemeProvider>
     ),
   ],
 };

src/components/ThemeProvider.tsx

@@ -53,6 +53,22 @@ export const ThemeContext = createContext(defaultTheme);
 export const ThemeProvider = (props: {
   children: React.ReactNode;
   theme?: PartialDeep<Theme>;
+  dark?: boolean
+}) => {
+  const { children, theme: providedTheme, dark } = props;
+  const theme = providedTheme ?? defaultTheme;
+  return (
+    <ThemeContext.Provider value={theme}>
+      <StyledThemeProvider theme={dark ? theme.dark : theme.light}>
+        {children}
+      </StyledThemeProvider>
+    </ThemeContext.Provider>
+  );
+};
+
+export const StorybookThemeProvider = (props: {
+  children: React.ReactNode;
+  theme?: PartialDeep<Theme>;
 }) => {
   const { children, theme: providedTheme } = props;
   const darkMode = useDarkMode(false);