chore(storybook): use custom themes and add dark mode support

1 files changed, 38 insertions, 2 deletions

diff --git a/.storybook/preview.js b/.storybook/preview.js
index e30927b..9df7514 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,6 +1,12 @@
-import '@styles/globals.scss';
 import * as NextImage from 'next/image';
+import { ThemeProvider, useTheme } from 'next-themes';
+import { useEffect } from 'react';
 import { IntlProvider } from 'react-intl';
+import { useDarkMode } from 'storybook-dark-mode';
+import { DocsContainer } from './overrides/docs-container';
+import dark from './themes/dark';
+import light from './themes/light';
+import '@styles/globals.scss';
 
 const OriginalNextImage = NextImage.default;
 
@@ -27,12 +33,42 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  darkMode: {
+    // Override the default dark theme
+    dark: { ...dark },
+    // Override the default light theme
+    light: { ...light },
+    stylePreview: true,
+  },
+  docs: {
+    container: DocsContainer,
+  },
+};
+
+// Create a component that listens for theme change.
+export const ThemeWrapper = (props) => {
+  const { setTheme } = useTheme();
+  const theme = useDarkMode() ? 'dark' : 'light';
+
+  useEffect(() => {
+    setTheme(theme);
+  }, [theme, setTheme]);
+
+  return <>{props.children}</>;
 };
 
 export const decorators = [
   (Story) => (
     <IntlProvider locale="en">
-      <Story />
+      <ThemeProvider
+        defaultTheme="system"
+        enableColorScheme={true}
+        enableSystem={true}
+      >
+        <ThemeWrapper>
+          <Story />
+        </ThemeWrapper>
+      </ThemeProvider>
     </IntlProvider>
   ),
 ];