fix: apply theme synchronously in Storybook decorator for Chromatic

- Use initialGlobals instead of deprecated defaultValue
- Apply data-theme attribute synchronously before React renders
- Default to dark theme when globals not set (Chromatic headless defaults to light)

This ensures Chromatic captures the correct theme in snapshots.

Author: ammar-agent

.storybook/preview.tsx

@@ -68,7 +68,6 @@ const preview: Preview = {
     theme: {
       name: "Theme",
       description: "Choose between light and dark UI themes",
-      defaultValue: "dark",
       toolbar: {
         icon: "mirror",
         items: [
@@ -79,13 +78,24 @@ const preview: Preview = {
       },
     },
   },
+  initialGlobals: {
+    theme: "dark",
+  },
   decorators: [
     (Story, context) => {
-      const mode = context.globals.theme as ThemeMode | undefined;
+      // Default to dark if mode not set (e.g., Chromatic headless browser defaults to light)
+      const mode = (context.globals.theme as ThemeMode | undefined) ?? "dark";
+
+      // Apply theme synchronously before React renders - critical for Chromatic snapshots
+      if (typeof document !== "undefined") {
+        document.documentElement.dataset.theme = mode;
+        document.documentElement.style.colorScheme = mode;
+      }
+
       return (
         <ThemeProvider forcedTheme={mode}>
           <Story />
-          {!mode && !isE2ETestEnv() && <StorybookThemeToggle />}
+          {!context.globals.theme && !isE2ETestEnv() && <StorybookThemeToggle />}
         </ThemeProvider>
       );
     },