Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Theme provider addon
Storybook addon to manage global themes provided by Styled components, Emotion or any other solution based on React component. Compatible with Storybook versions 7 and 8
npm install storybook-addon-theme-provider
Last updated 2 months ago
2.7k
Downloads per week
Readme View on GitHub

Storybook Addon Theme Provider

storybook addon npm version npm GitHub package.json dynamic GitHub Repo stars

Addon to manage global themes provided by Styled components, Emotion or any other solution based on React component, which receives prop theme?: Record<string, unknown> and children node(s). This addon is compatible with Storybook versions 7 and 8.

Inspired by storybook-addon-themes.

Storybook Addon theme-provider

Install

  1. Install addon with the package manager of your choice.
npm i -D storybook-addon-theme-provider
yarn add -D storybook-addon-theme-provider
pnpm i -D storybook-addon-theme-provider
  1. Register addon in .storybook/main.(js|ts)
export default {
    //...
    addons: [
        //...
        "storybook-addon-theme-provider",
        //...
    ],
};

Use themes

Add decorator withThemeProvider to .storybook/preview.(js|ts). This applies theme settings on global level.

import {withThemeProvider} from 'storybook-addon-theme-provider';
import {Provider} from './Provider';

export default {
    //...
    decorators:[
        withThemeProvider(Provider),
        ///...
    ],
    globals: {
        // Set initially selected theme name
        selectedTheme: 'foo',
        // Provide a list of available themes
        themes: [
            {
                // Provide a name for the theme.
                name: 'foo',
                // Set a color to display after theme name
                color: 'red',
                // Provide object with foo theme data
                themeObject: {
                    baseColor: 'red',
                    //...
                }
            },
            {
                name: 'bar',
                color: '#AAAAAA',
                themeObject: {
                    baseColor: 'green',
                }
            }
        ]
    },
    //...
}

It's also possible to enable decorator on story level.

// some CSF story file

export const story = {
  decorators: [withThemeProvider(Provider)]
};

Use Provider component

Provider is a React component which receives theme prop, containing selected theme object, and children nodes. See Styled component theming or Emotion ThemeProvider.

Developer can use custom Provider component as well.

import React, {ReactNode} from 'react';

export const Provider = <TTheme,>({children, theme}: {children?: ReactNode; theme?: TTheme}) => {
    // apply theme somehow
    console.log('theme', theme)
    return <div>{children}</div>
}
Join the community
6,609 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI