Storybook Addon Theme Provider

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.

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

2. 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>
}