fix: dark mode support to storybook (#5964)

.storybook/main.js

@@ -9,6 +9,7 @@ const config = {
     "@storybook/addon-essentials",
     "@storybook/addon-a11y",
     "@tomfreudenberg/next-auth-mock/storybook",
+    "storybook-dark-mode",
     {
       name: '@storybook/addon-docs',
       options: {

.storybook/preview.js

@@ -1,4 +1,19 @@
 import "../styles/globals.css";
+import { ThemeProvider } from "next-themes";
+import { useDarkMode } from "storybook-dark-mode";
+import { themes } from "@storybook/theming";
+
+function ThemeWrapper({children}) {
+  // render your custom theme provider
+  return (
+    <ThemeProvider attribute="class" forcedTheme={useDarkMode() ? 'dark' : 'light'}>
+      {children}
+    </ThemeProvider>
+  );
+}
+
+export const decorators = [(renderStory => <ThemeWrapper>{renderStory()}</ThemeWrapper>)];
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
@@ -19,5 +34,9 @@ export const parameters = {
         values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']
       }
     }
+  },
+  darkMode: {
+    dark: themes.dark,
+    light: themes.normal
   }
 };

package.json

@@ -90,7 +90,8 @@
     "ncp": "^2.0.0",
     "postcss": "^8.4.21",
     "prettier": "^2.8.7",
-    "storybook": "^7.0.2"
+    "storybook": "^7.0.2",
+    "storybook-dark-mode": "^3.0.0"
   },
   "description": "LinkFree connect audiences to all of your content with just one link. It is an open-source alternative to [Linktree](https://linktr.ee/) implemented in JavaScript - It was initially created on a YouTube [live stream](https://www.youtube.com/watch?v=Jorl_vcp-Ew).",
   "repository": {
@@ -111,4 +112,4 @@
   "bugs": {
     "url": "https://github.com/EddieHubCommunity/LinkFree/issues"
   }
-}
+}