storybook-addon-theme-selector

0.0.6 • Public • Published

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);
 

Readme

Keywords

none

Package Sidebar

Install

npm i storybook-addon-theme-selector

Weekly Downloads

4

Version

0.0.6

License

MIT

Unpacked Size

125 kB

Total Files

14

Last publish

Collaborators

  • prevdev