diff --git a/package-lock.json b/package-lock.json
index 392689e7..e8e581d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -74,6 +74,7 @@
         "react-test-renderer": "18.2.0",
         "rehype-stringify": "^9.0.3",
         "remark": "^14.0.3",
+        "storybook-tailwind-dark-mode": "^1.0.22",
         "swc-loader": "0.1.15",
         "ts-jest": "^29.0.5",
         "ts-node": "10.9.1",
@@ -42157,6 +42158,29 @@
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/storybook-tailwind-dark-mode": {
+      "version": "1.0.22",
+      "resolved": "https://registry.npmjs.org/storybook-tailwind-dark-mode/-/storybook-tailwind-dark-mode-1.0.22.tgz",
+      "integrity": "sha512-I0HSVCuvo3OkaGDnCjLM7V1OYmQccrUCAGZ5ZaJfl9s3e93WA6DKFpQRbuoSidci+PTy+KvgrINgE08rA16bWA==",
+      "dev": true,
+      "peerDependencies": {
+        "@storybook/addons": "^7.0.0",
+        "@storybook/api": "^7.0.0",
+        "@storybook/components": "^7.0.0",
+        "@storybook/core-events": "^7.0.0",
+        "@storybook/theming": "^7.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/stream-shift": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
@@ -80050,6 +80074,13 @@
         "@storybook/cli": "7.0.18"
       }
     },
+    "storybook-tailwind-dark-mode": {
+      "version": "1.0.22",
+      "resolved": "https://registry.npmjs.org/storybook-tailwind-dark-mode/-/storybook-tailwind-dark-mode-1.0.22.tgz",
+      "integrity": "sha512-I0HSVCuvo3OkaGDnCjLM7V1OYmQccrUCAGZ5ZaJfl9s3e93WA6DKFpQRbuoSidci+PTy+KvgrINgE08rA16bWA==",
+      "dev": true,
+      "requires": {}
+    },
     "stream-shift": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
diff --git a/package.json b/package.json
index b9c356b7..74b47e84 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "react-test-renderer": "18.2.0",
     "rehype-stringify": "^9.0.3",
     "remark": "^14.0.3",
+    "storybook-tailwind-dark-mode": "^1.0.22",
     "swc-loader": "0.1.15",
     "ts-jest": "^29.0.5",
     "ts-node": "10.9.1",
diff --git a/packages/core/.storybook/main.ts b/packages/core/.storybook/main.ts
index 782eaffe..6bb88205 100644
--- a/packages/core/.storybook/main.ts
+++ b/packages/core/.storybook/main.ts
@@ -6,6 +6,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@nrwl/react/plugins/storybook',
+    'storybook-tailwind-dark-mode'
   ],
   framework: {
     name: '@storybook/react-webpack5',
diff --git a/packages/core/.storybook/preview.ts b/packages/core/.storybook/preview.ts
index 8c8889d1..bbd3eecb 100644
--- a/packages/core/.storybook/preview.ts
+++ b/packages/core/.storybook/preview.ts
@@ -1 +1,14 @@
 import './tailwind-imports.css';
+
+const preview = {
+    globalTypes: {
+        darkMode: {
+            defaultValue: false, // Enable dark mode by default on all stories
+        },
+        className: {
+            defaultValue: 'dark', // Set your custom dark mode class name
+        },
+    },
+};
+
+export default preview;