fix(.storybook/preview): sync theme from global with storage key

Author: TylerAPfledderer

.storybook/ThemeChanger.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react"
+import { useTheme } from "next-themes"
+
+/**
+ * Forces update of color mode to `next-theme` provider when
+ * changing the mode from Storybook.
+ *
+ * This will keep color mode synced with the `theme` key in local storage.
+ */
+export const ThemeChanger = ({ theme }: { theme: "light" | "dark" }) => {
+  const { setTheme } = useTheme()
+
+  useEffect(() => {
+    console.log("Syncing color mode for SB and next-themes to: ", theme)
+    setTheme(theme)
+  }, [setTheme, theme])
+
+  return null
+}

.storybook/preview.tsx

@@ -6,6 +6,7 @@ import type { Preview } from "@storybook/react"
 import ThemeProvider from "@/components/ThemeProvider"
 
 import i18n, { baseLocales } from "./i18next"
+import { ThemeChanger } from "./ThemeChanger"
 
 import "@docsearch/css"
 import "../src/styles/global.css"
@@ -36,11 +37,14 @@ const preview: Preview = {
       },
       defaultTheme: "light",
     }),
-    (Story) => (
-      <ThemeProvider>
-        <Story />
-      </ThemeProvider>
-    ),
+    (Story, context) => {
+      return (
+        <ThemeProvider>
+          <ThemeChanger theme={context.globals.theme} />
+          <Story />
+        </ThemeProvider>
+      )
+    },
   ],
   parameters: {
     i18n,