Merge pull request #13672 from TylerAPfledderer/fix/sb-color-mode-next-themes-sync

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

Author: pettinarip

.storybook/preview.tsx

@@ -1,11 +1,11 @@
 import isChromatic from "chromatic/isChromatic"
 import { MotionGlobalConfig } from "framer-motion"
-import { withThemeByDataAttribute } from "@storybook/addon-themes"
 import type { Preview } from "@storybook/react"
 
 import ThemeProvider from "@/components/ThemeProvider"
 
 import i18n, { baseLocales } from "./i18next"
+import { withNextThemes } from "./withNextThemes"
 
 import "@docsearch/css"
 import "../src/styles/global.css"
@@ -29,7 +29,7 @@ const preview: Preview = {
     locales: baseLocales,
   },
   decorators: [
-    withThemeByDataAttribute({
+    withNextThemes({
       themes: {
         light: "light",
         dark: "dark",

.storybook/withNextThemes.ts

@@ -0,0 +1,28 @@
+import { useEffect } from "react"
+import { useTheme } from "next-themes"
+import {
+  type DataAttributeStrategyConfiguration,
+  DecoratorHelpers,
+} from "@storybook/addon-themes"
+import type { Decorator } from "@storybook/react/*"
+
+const { initializeThemeState, pluckThemeFromContext } = DecoratorHelpers
+
+export const withNextThemes = ({
+  themes,
+  defaultTheme,
+}: DataAttributeStrategyConfiguration): Decorator => {
+  initializeThemeState(Object.keys(themes), defaultTheme)
+
+  return (getStory, context) => {
+    const selectedTheme = pluckThemeFromContext(context)
+    const selected = selectedTheme || defaultTheme
+    const { setTheme } = useTheme()
+
+    useEffect(() => {
+      setTheme(selected)
+    }, [selected, setTheme])
+
+    return getStory(context)
+  }
+}