fix: remove globals wrapper from Chromatic theme modes

Custom decorators that read from context.globals.theme need mode objects
to directly set the global name, not wrap it under 'globals'. Also fixes
formatting in ThemeContext files.

Author: ammar-agent

.storybook/preview.tsx

@@ -99,8 +99,8 @@ const preview: Preview = {
     },
     chromatic: {
       modes: {
-        dark: { globals: { theme: "dark" } },
-        light: { globals: { theme: "light" } },
+        dark: { theme: "dark" },
+        light: { theme: "light" },
       },
     },
   },

src/browser/contexts/ThemeContext.test.tsx

@@ -22,7 +22,9 @@ const TestComponent = () => {
   return (
     <div>
       <span data-testid="theme-value">{theme}</span>
-      <button onClick={toggleTheme} data-testid="toggle-btn">Toggle</button>
+      <button onClick={toggleTheme} data-testid="toggle-btn">
+        Toggle
+      </button>
     </div>
   );
 };
@@ -59,7 +61,7 @@ describe("ThemeContext", () => {
   afterEach(() => {
     cleanup();
     if (typeof window !== "undefined") {
-        window.localStorage.clear();
+      window.localStorage.clear();
     }
   });
 
@@ -91,15 +93,15 @@ describe("ThemeContext", () => {
   });
 
   test("forcedTheme overrides persisted state", () => {
-     window.localStorage.setItem(UI_THEME_KEY, JSON.stringify("light"));
-     
-     const { getByTestId } = render(
+    window.localStorage.setItem(UI_THEME_KEY, JSON.stringify("light"));
+
+    const { getByTestId } = render(
       <ThemeProvider forcedTheme="dark">
         <TestComponent />
       </ThemeProvider>
     );
     expect(getByTestId("theme-value").textContent).toBe("dark");
-    
+
     // Check that localStorage is still light (since forcedTheme doesn't write to storage by itself)
     expect(JSON.parse(window.localStorage.getItem(UI_THEME_KEY)!)).toBe("light");
   });

src/browser/contexts/ThemeContext.tsx

@@ -58,9 +58,13 @@ export function ThemeProvider({
   children: ReactNode;
   forcedTheme?: ThemeMode;
 }) {
-  const [persistedTheme, setTheme] = usePersistedState<ThemeMode>(UI_THEME_KEY, resolveSystemTheme(), {
-    listener: true,
-  });
+  const [persistedTheme, setTheme] = usePersistedState<ThemeMode>(
+    UI_THEME_KEY,
+    resolveSystemTheme(),
+    {
+      listener: true,
+    }
+  );
 
   const theme = forcedTheme ?? persistedTheme;