theming was changed

packages/components/.storybook/DocsContainer.js

@@ -1,21 +1,15 @@
 import React from "react";
 import { DocsContainer as BaseContainer } from "@storybook/blocks";
-import { themes } from "@storybook/theming";
+import { useDarkMode } from "storybook-dark-mode";
+import darkTheme from "./darkTheme";
+import lightTheme from "./lightTheme";
 
 export const DocsContainer = ({ children, context }) => {
-  const modifiedDarkTheme = {
-    ...themes.dark,
-    appBg: "#333", // Replace 'new-color' with the desired background color
-  };
 
   return (
     <BaseContainer
       context={context}
-      theme={
-        context.store?.globals.globals.theme === "Dark"
-          ? modifiedDarkTheme
-          : themes.light
-      }
+      theme={useDarkMode() ? darkTheme : lightTheme}
     >
       {children}
     </BaseContainer>

packages/components/.storybook/globals/index.js

@@ -1,14 +0,0 @@
-const globalTypes = {
-  theme: {
-    description: "Global theme for components",
-    defaultValue: "Light",
-    toolbar: {
-      title: "Theme",
-      icon: "photo",
-      items: ["Light", "Dark"],
-      dynamicTitle: true,
-    },
-  },
-};
-
-export default globalTypes;

packages/components/.storybook/main.js

@@ -30,6 +30,7 @@ module.exports = {
       },
     },
     "@storybook/addon-mdx-gfm",
+    "storybook-dark-mode",
   ],
   framework: {
     name: "@storybook/react-webpack5",

packages/components/.storybook/manager.js

@@ -1,7 +1,7 @@
 import { addons } from "@storybook/manager-api";
 
-import theme from "./theme";
+import lightTheme from "./lightTheme";
 
 addons.setConfig({
-  theme,
+  lightTheme,
 });

packages/components/.storybook/preview.js

@@ -1,13 +1,18 @@
 import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
 import { Base, Dark } from "../themes/index";
 import "../../common/opensansoffline.scss";
-import globalTypes from "./globals";
 import ThemeWrapper from "./globals/theme-wrapper";
 import { DocsContainer } from "./DocsContainer";
+import { useDarkMode } from "storybook-dark-mode";
 import "../index";
 
+import lightTheme from "./lightTheme";
+import darkTheme from "./darkTheme";
+
+import lightLogo from "./lightsmall.png";
+import darkLogo from "./darksmall.png";
+
 const preview = {
-  globalTypes,
   parameters: {
     backgrounds: { disable: true },
     actions: { argTypesRegex: "^on[A-Z].*" },
@@ -23,12 +28,22 @@ const preview = {
         hidden: true,
       },
     },
+    darkMode: {
+      current: "light",
+      light: {
+        ...lightTheme,
+        brandImage: lightLogo,
+      },
+      dark: {
+        ...darkTheme,
+        brandImage: darkLogo,
+      },
+    },
   },
   decorators: [
-    (Story, context) => {
-      const theme = context.globals.theme;
+    (Story) => {
       return (
-        <ThemeWrapper theme={theme === "Dark" ? Dark : Base}>
+        <ThemeWrapper theme={useDarkMode() ? Dark : Base}>
           <Story />
         </ThemeWrapper>
       );