Native appearance and story layout

Control light/dark capture, safe areas, and the status bar.

Light and dark#

In native project capture settings, choose the device appearance or enable both light and dark where offered. Each appearance produces its own variant. A component that responds to the device colour scheme can then be tested in both states.

A Storybook theme global is separate from the native device appearance. If your decorator expects a theme global, set it as well.

Per-mode appearance#

export const Default = {
  parameters: {
    framecheck: {
      modes: {
        light: { colorScheme: 'light', globals: { theme: 'light' } },
        dark: { colorScheme: 'dark', globals: { theme: 'dark' } },
      },
    },
  },
};

Use light or dark for native mode colour schemes. Confirm your Storybook version exposes the intended globals to the story and its decorators. Web viewport dimensions do not resize a native device; choose the offered native device profile instead.

Safe areas and status bar#

The current generated capture wrapper shows the status bar and applies safe-area padding around story content. It uses the story's theme parameter or theme global to choose status-bar contrast, falling back to device appearance.

If a full-screen story manages its own safe-area insets, parameters.noSafeArea: true opts out of the wrapper's additional padding. Review the screenshot after using it so controls do not accidentally overlap system areas.

Update older capture entries#

If your capture build still hides the status bar or includes the Storybook controls, compare it with the current Setup snippet. Accept layout changes only after confirming the new framing is intended. The capture wrapper belongs in the test build, not in your production UI.