diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 8fd3e7143..ded5753bc 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -4,17 +4,26 @@
     transition: background-color 0.3s ease, color 0.3s ease;
   }
 
-  /* Light theme default */
-  body {
-    background-color: #ffffff;
-    color: #1a1a1a;
+  /* Light theme default - with explicit color to override media queries */
+  body:not(.dark-theme) {
+    background-color: #fff !important;
+    color: #000 !important;
+  }
+
+  /* Override browser dark mode preference for light theme */
+  @media (prefers-color-scheme: dark) {
+    body:not(.dark-theme) {
+      color: #000 !important;
+      --fg-color: #000 !important;
+      --bg-color: #fff !important;
+    }
   }
 
   /* Dark theme styles */
   body.dark-theme,
   .dark-theme body {
-    background-color: #0a0a0a;
-    color: #e5e5e5;
+    background-color: #202020;
+    color: #fff;
   }
 
   /* Ensure Storybook canvas follows theme */
@@ -24,7 +33,7 @@
 
   .dark-theme .sb-show-main,
   .dark-theme .docs-story {
-    background-color: #0a0a0a !important;
+    background-color: #202020 !important;
   }
 
   /* Fix for Storybook controls panel in dark mode */
@@ -32,6 +41,25 @@
     color: #e5e5e5;
   }
 
+  /* CSS Variables for theme consistency */
+  body:not(.dark-theme) {
+    --fg-color: #000;
+    --bg-color: #fff;
+    --content-bg: #e0e0e0;
+    --content-fg: #000;
+    --content-hover-bg: #adadad;
+    --content-hover-fg: #000;
+  }
+
+  body.dark-theme {
+    --fg-color: #fff;
+    --bg-color: #202020;
+    --content-bg: #4e4e4e;
+    --content-fg: #fff;
+    --content-hover-bg: #222;
+    --content-hover-fg: #fff;
+  }
+
   /* Override Storybook's problematic & selector styles */
   /* Reset only the specific properties that Storybook injects */
   #storybook-root li+li,