.storybook/main.ts

@@ -7,6 +7,7 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
+    "storybook-dark-mode"
   ],
   framework: {
     name: "@storybook/nextjs",

.storybook/preview.tsx

@@ -1,6 +1,13 @@
 import type { Preview } from "@storybook/react";
 import React from "react";
+import { themes } from '@storybook/theming';
+import { ThemeProvider } from "../src/app/[lang]/dashboard/components/client/theme-provider/theme-provider";
+import { DARK_MODE_EVENT_NAME, UPDATE_DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
+import { addons } from '@storybook/preview-api';
 import "../src/app/globals.css"
+
+
+const channel = addons.getChannel();
 /**
  *
  * This function will expand the object with nested properties
@@ -35,9 +42,11 @@ export const recursiveNestedProps = (
   );
 };
 
-const preview: Preview = {
+const preview = {
     decorators: [
     (Story, data) => {
+      const [isDark, setDark] = React.useState(false);
+
       const parsedProps = {} as Record<string, unknown>;
       const props = data.allArgs;
       Object.entries(props).forEach((prop) => {
@@ -52,13 +61,31 @@ const preview: Preview = {
       });
 
 
+      React.useEffect(() => {
+        channel.on(DARK_MODE_EVENT_NAME, setDark);
+        return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
+      }, [channel, setDark]);
+
+
       return (
-        <div>
+        <ThemeProvider
-          <Story parsedProps={parsedProps} />
+          attribute="class"
-        </div>
+          forcedTheme={isDark ? "dark" : "light"}
+          enableSystem
+          disableTransitionOnChange
+       >
+         <Story parsedProps={parsedProps} />
+       </ThemeProvider> 
       );
     },
   ],
+  darkMode: {
+    // Override the default dark theme
+    dark: { ...themes.dark, appBg: 'black' },
+    // Override the default light theme
+    classTarget: 'html',
+    light: { ...themes.normal, appBg: 'red' },
+  },
   parameters: {
     controls: {
       matchers: {

package.json

@@ -70,6 +70,7 @@
     "postcss": "^8",
     "prettier": "^3.3.3",
     "storybook": "^8.4.5",
+    "storybook-dark-mode": "^4.0.2",
     "tailwindcss": "^3.4.1",
     "typescript": "^5",
     "vitest": "^2.1.4"

yarn.lock

@@ -1809,11 +1809,16 @@
     webpack-hot-middleware "^2.25.1"
     webpack-virtual-modules "^0.6.0"
 
-"@storybook/components@8.4.5":
+"@storybook/components@8.4.5", "@storybook/components@^8.0.0":
   version "8.4.5"
   resolved "https://registry.yarnpkg.com/@storybook/components/-/components-8.4.5.tgz#039e4cb5090c56c47fc10f0c5ecda77f4b015c7f"
   integrity sha512-2PdnKfqNNv3sO7qILgWXiNvmLOi503oN9OMemNCQjTIvdvySc5JpS9/eClwcl/JfmE4qHdSHZr8dLLkBM9S7+Q==
 
+"@storybook/core-events@^8.0.0":
+  version "8.4.5"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-8.4.5.tgz#b2847bdbeb964019a9d134a311511b7d227e1682"
+  integrity sha512-+DeYpAuav9E/Q5x5BVrMpf+XBFbVQJuJbVXNiglZcJNH13D/G2WDToOYAbGviZ6CBvbUdjlqC7y9+/emwP78bA==
+
 "@storybook/core-webpack@8.4.5":
   version "8.4.5"
   resolved "https://registry.yarnpkg.com/@storybook/core-webpack/-/core-webpack-8.4.5.tgz#b17422cff80c638e3478406193acedb9be2d50cb"
@@ -1858,7 +1863,7 @@
   resolved "https://registry.yarnpkg.com/@storybook/global/-/global-5.0.0.tgz#b793d34b94f572c1d7d9e0f44fac4e0dbc9572ed"
   integrity sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==
 
-"@storybook/icons@^1.2.12":
+"@storybook/icons@^1.2.12", "@storybook/icons@^1.2.5":
   version "1.2.12"
   resolved "https://registry.yarnpkg.com/@storybook/icons/-/icons-1.2.12.tgz#3e4c939113b67df7ab17b78f805dbb57f4acf0db"
   integrity sha512-UxgyK5W3/UV4VrI3dl6ajGfHM4aOqMAkFLWe2KibeQudLf6NJpDrDMSHwZj+3iKC4jFU7dkKbbtH2h/al4sW3Q==
@@ -1871,7 +1876,7 @@
     "@storybook/global" "^5.0.0"
     "@vitest/utils" "^2.1.1"
 
-"@storybook/manager-api@8.4.5":
+"@storybook/manager-api@8.4.5", "@storybook/manager-api@^8.0.0":
   version "8.4.5"
   resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-8.4.5.tgz#ce586cc5961297272f7228446161015464c65067"
   integrity sha512-t39JaMy3UX4StbUH/tIDcaflBDxTcyIq853wQtBMhVL3e1+Dw3MIiiG/5bw79HU4R7kSmPVLXIIbV3FmXkq7KQ==
@@ -1989,7 +1994,7 @@
     "@vitest/expect" "2.0.5"
     "@vitest/spy" "2.0.5"
 
-"@storybook/theming@8.4.5":
+"@storybook/theming@8.4.5", "@storybook/theming@^8.0.0":
   version "8.4.5"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-8.4.5.tgz#d7c77215f09906c9bb124d530d4307fd1841fbb8"
   integrity sha512-45e/jeG4iuqdZcHg3PbB6dwXQTwlnnEB7r/QcVExyC7ibrkTnjUfvxzyUw4mmU3CXETFGD5EcUobFkgK+/aPxQ==
@@ -7006,6 +7011,20 @@ std-env@^3.7.0:
   resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.7.0.tgz#c9f7386ced6ecf13360b6c6c55b8aaa4ef7481d2"
   integrity sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==
 
+storybook-dark-mode@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/storybook-dark-mode/-/storybook-dark-mode-4.0.2.tgz#2536d1a229ac050172d37aa50bd9f6f7cdad0425"
+  integrity sha512-zjcwwQ01R5t1VsakA6alc2JDIRVtavryW8J3E3eKLDIlAMcvsgtpxlelWkZs2cuNspk6Z10XzhQVrUWtYc3F0w==
+  dependencies:
+    "@storybook/components" "^8.0.0"
+    "@storybook/core-events" "^8.0.0"
+    "@storybook/global" "^5.0.0"
+    "@storybook/icons" "^1.2.5"
+    "@storybook/manager-api" "^8.0.0"
+    "@storybook/theming" "^8.0.0"
+    fast-deep-equal "^3.1.3"
+    memoizerific "^1.11.3"
+
 storybook@^8.4.5:
   version "8.4.5"
   resolved "https://registry.yarnpkg.com/storybook/-/storybook-8.4.5.tgz#ba9589e2887958d1353dbc1a2cb6142e80e36a2c"