New
Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Star80,487
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-theme-selector
Storybook addon tools for selecting user-defined themes
npm install storybook-addon-theme-selector
Last updated about 4 years ago
1
Downloads per week
Readme View on GitHub

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);
Join the community
6,324 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI