Lesson 22 / 25

Theming and Styling Storybook

Customize the Storybook UI with the theming API to match your brand, and verify components in light and dark modes.

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.