New
NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Star75,387
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-multi-theme
Multiple themes simultaneously
npm install storybook-addon-multi-theme
Last updated 4 months ago
1.8k
Downloads per week
Readme View on GitHub

Storybook Addon Multi Theme

Multiple themes simultaneously

Demo

Installation

npm i -D storybook-addon-multi-theme

Getting started

// .storybook/main.js
module.exports = {
  addons: [
    // ...otherAddons
    'storybook-addon-multi-theme'
  ],
};
// .storybook/preview.js
import { ThemeProvider } from 'emotion-theming';

export const parameters = {
  multiTheme:
    {
      list: [
        {
          name: "Light",
          class: "light-theme", // this is handy if you set theme styles based on parent css class
          iconColor: "#fff",
          backgroundColor: `#fff`,
          selectedByDefault: true,
	  wrapperComponent: ({children}) => {
	    return <ThemeProvider theme={light}> {children} </ThemeProvider>
    	  }
        },
        {
          name: "Dark",
          class: "dark-theme",
          iconColor: "#1E2125",
          backgroundColor: `#1E2125`,
	  wrapperComponent: ({children}) => {
	    return <ThemeProvider theme={light}> {children} </ThemeProvider>
    	  }
        }
      ]
    }
}
Join the community
5,862 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI