Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Custom Theme Switcher
Theme switcher tool addon that changes the themes using CSS custom properties
npm install storybook-custom-theme-switcher
Last updated 2 months ago
99
Downloads per week
Readme View on GitHub

Storybook Custom Theme Switcher

Storybook custom theme switcher

This addon can be used to set a data attribute in Storybook's iframe HTML element triggering a toggle between your custom themes.

Example styles:

:root [data-theme="theme1"] {
  --white: #000;
  --black: #fff;
}

:root [data-theme="theme2"] {
  --white: #fff;
  --black: #000;
}

:root [data-theme="theme3"] {
  --white: #696969;
  --black: #700404;
}

Installation

NPM / Yarn

npm i -D storybook-custom-theme-switcher

yarn add storybook-custom-theme-switcher -D

Add the addon to .storybook/main.js:

module.exports = {
  addons: ["storybook-custom-theme-switcher"],
};

Add parameters options to .storybook/preview.js:

export const parameters = {
  theme: {
    selector: "body",
    dataAttr: "data-theme",
    /* Put all theme options in
    themeOptions. You can name
    customeTheme as you want.*/
    themeOptions: {
      default: "", // empty string for option to get back to default theme 
      customeTheme1: "theme1",
      customeTheme2: "theme2",
      customeTheme3: "theme3",
    },
    defaultTheme: "",
  },
};

Parameters

The theme parameter accept an array of Theme object.

Each Theme is an object with the following properties:

  • selector (string - default: 'body'): Target element to which the data Attribute will be applied.
  • dataAttr (string - default: 'data-theme'): The data attribute that will be applied.
  • themeOptions ({ [key: string]: string } - default: {}): The themes you want to use as an Object.
  • defaultTheme (string - default: ''): The name of the theme that should be used on default.

Usage

Click on the new theme popup in the toolbar in storybook to switch between your themes.

Join the community
6,622 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetry
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI