Theming and Styling Storybook

Theme configuration

Storybook uses a theming API to customize colors, typography, and UI elements. Create a branded Storybook that matches your design system.

Custom theme example

Define a theme object to customize Storybook's UI.

import { create } from '@storybook/theming';

export default create({
  base: 'light',
  brandTitle: 'My Design System',
  brandImage: 'https://example.com/logo.svg',
  colorPrimary: '#f97316',
  colorSecondary: '#0891b2',
  textColor: '#333',
  textInverseColor: '#fff',
});

Dark mode support

Storybook supports light and dark themes out of the box. Ensure your components look good in both modes.

Consistency across themes

Test your stories in both light and dark themes to ensure consistent appearance and readability.