Custom Storybook Theme Creator

Build a theme configuration utility that creates custom Storybook themes with company branding and supports both light and dark variants.

Capabilities

Theme Creation

• Creates a custom theme object with company branding (title, URL, logo image URL) @test
• Applies custom color scheme with primary color "#FF6B35" and secondary color "#004E89" @test
• Sets custom typography with base font "Inter, sans-serif" and code font "Fira Code, monospace" @test

Theme Variants

• Generates a light theme variant with light background "#FFFFFF" and dark text "#1A1A1A" @test
• Generates a dark theme variant with dark background "#1A1A1A" and light text "#F5F5F5" @test

Implementation

@generates

API

export interface BrandingOptions {
  title: string;
  url: string;
  image: string;
}

export interface ColorOptions {
  primary: string;
  secondary: string;
}

export interface TypographyOptions {
  baseFont: string;
  codeFont: string;
}

export interface ThemeOptions {
  branding: BrandingOptions;
  colors: ColorOptions;
  typography: TypographyOptions;
}

/**
 * Creates a custom light theme with the provided options
 */
export function createLightTheme(options: ThemeOptions): object;

/**
 * Creates a custom dark theme with the provided options
 */
export function createDarkTheme(options: ThemeOptions): object;

Dependencies { .dependencies }

@storybook/theming { .dependency }

Provides theming utilities and base theme creation functionality.