storybook(native): add backgrounds options and sync ThemeProvider to selected background; align with web preview

cursoragent · cursoragent · commit 225051d0050d · 2026-06-03T20:58:31.000Z
diff --git a/apps/storybook-react-native/.rnstorybook/preview.tsx b/apps/storybook-react-native/.rnstorybook/preview.tsx
@@ -2,13 +2,24 @@ import type { Preview } from '@storybook/react-native';
 import { Theme, ThemeProvider } from '@metamask/design-system-twrnc-preset';
 import { darkTheme, lightTheme } from '@metamask/design-tokens';
 import React, { type PropsWithChildren } from 'react';
-import { useColorScheme } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
-const ThemeDecorator = ({ children }: PropsWithChildren) => {
-  const colorScheme = useColorScheme();
-  const theme = colorScheme === 'dark' ? Theme.Dark : Theme.Light;
+// Background options keyed by name so on-device backgrounds toolbar
+// and context.globals.backgrounds.value (which returns the key) both work.
+const backgroundOptions = {
+  light: { name: 'light', value: lightTheme.colors.background.default },
+  dark: { name: 'dark', value: darkTheme.colors.background.default },
+};
+
+function themeFromKey(key?: string): Theme {
+  return key === 'dark' ? Theme.Dark : Theme.Light;
+}
+
+type ThemeDecoratorProps = PropsWithChildren<{ selectedKey?: string }>;
+
+const ThemeDecorator = ({ children, selectedKey }: ThemeDecoratorProps) => {
+  const theme = themeFromKey(selectedKey);
   const backgroundColor =
     theme === Theme.Dark
       ? darkTheme.colors.background.default
@@ -25,12 +36,26 @@ const ThemeDecorator = ({ children }: PropsWithChildren) => {
 
 const preview: Preview = {
   decorators: [
-    (Story: React.ComponentType) => (
-      <ThemeDecorator>
-        <Story />
-      </ThemeDecorator>
-    ),
+    (Story: React.ComponentType, context: any) => {
+      const selectedKey = context.globals?.backgrounds?.value as
+        | string
+        | undefined;
+      return (
+        <ThemeDecorator selectedKey={selectedKey}>
+          <Story />
+        </ThemeDecorator>
+      );
+    },
   ],
+  parameters: {
+    backgrounds: {
+      options: backgroundOptions,
+    },
+    layout: 'fullscreen',
+  },
+  initialGlobals: {
+    backgrounds: { value: 'light' },
+  },
 };
 
 export default preview;
