Storybook-addon-theme-selector

Storybook addon tools for selecting user-defined themes

Example Usage

On .storybook/config.tsx:

import { configure, addDecorator, addParameters } from '@storybook/react';

addParameters({
    themes: [
        { name: 'default', theme: LIGHT_THEME, default: true },
        { name: 'dark', theme: DARK_THEME },
    ],
});

let currentTheme: ThemeType = LIGHT_THEME;

const ThemeDecorator = (storyFn: any) => {
    class Container extends React.Component {
        state = {
            theme: currentTheme,
        };

        constructor(props: any) {
            super(props);

            addons.getChannel().on('theme-selector/themeChanged', theme => {
                currentTheme = theme;
                this.setState({ theme });
            });
        }

        render() {
            const { theme } = this.state;
            return (
                <div style={{ color: theme.text, backgroundColor: theme.background }}>
                    <ThemeProvider value={{ theme }}>
                        {storyFn()}
                    </ThemeProvider>
                </div>
            );
        }
    }
    return <Container />;
};
addDecorator(ThemeDecorator);