# Theming and Styling Storybook — Storybook

Source: https://www.geekswithgeeks.com/en/storybook/sb-theming

> Customize Storybook's appearance to match your brand.

## 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.

```ts
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.