diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 0000000000..ae97c82dd1
--- /dev/null
+++ b/.storybook/preview-head.html
@@ -0,0 +1,34 @@
+<style>
+  body {
+    overflow-y: auto !important;
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
+
+  /* Light theme default */
+  body {
+    background-color: #ffffff;
+    color: #1a1a1a;
+  }
+
+  /* Dark theme styles */
+  body.dark-theme,
+  .dark-theme body {
+    background-color: #0a0a0a;
+    color: #e5e5e5;
+  }
+
+  /* Ensure Storybook canvas follows theme */
+  .sb-show-main {
+    transition: background-color 0.3s ease;
+  }
+
+  .dark-theme .sb-show-main,
+  .dark-theme .docs-story {
+    background-color: #0a0a0a !important;
+  }
+
+  /* Fix for Storybook controls panel in dark mode */
+  .dark-theme .docblock-argstable-body {
+    color: #e5e5e5;
+  }
+</style>
\ No newline at end of file
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 5bfdc78024..747bbe8029 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -50,6 +50,22 @@ setup((app) => {
   app.use(ToastService)
 })
 
+// Dark theme decorator
+export const withTheme = (Story: any, context: any) => {
+  const theme = context.globals.theme || 'light'
+
+  // Apply theme class to document root
+  if (theme === 'dark') {
+    document.documentElement.classList.add('dark-theme')
+    document.body.classList.add('dark-theme')
+  } else {
+    document.documentElement.classList.remove('dark-theme')
+    document.body.classList.remove('dark-theme')
+  }
+
+  return Story()
+}
+
 const preview: Preview = {
   parameters: {
     controls: {
@@ -62,10 +78,27 @@ const preview: Preview = {
       default: 'light',
       values: [
         { name: 'light', value: '#ffffff' },
-        { name: 'dark', value: '#1a1a1a' }
+        { name: 'dark', value: '#0a0a0a' }
       ]
     }
-  }
+  },
+  globalTypes: {
+    theme: {
+      name: 'Theme',
+      description: 'Global theme for components',
+      defaultValue: 'light',
+      toolbar: {
+        icon: 'circlehollow',
+        items: [
+          { value: 'light', icon: 'sun', title: 'Light' },
+          { value: 'dark', icon: 'moon', title: 'Dark' }
+        ],
+        showName: true,
+        dynamicTitle: true
+      }
+    }
+  },
+  decorators: [withTheme]
 }
 
 export default preview