New
Styling Addon: configure styles and themes in StorybookAutomate with Chromatic
Storybook Day 2023
Star77,670
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Stylesheet Toggle
A Storybook addon for toggling between stylesheets.
npm install storybook-stylesheet-toggle
Last updated almost 2 years ago
810
Downloads per week
Readme View on GitHub

Storybook Stylesheet Toggle

A simple addon for Storybook that allows you to define a set of stylesheets that can be toggled between. This may be useful if your project has multiple themes, or if you want to stress test your components in different styling environments.

Getting started

yarn add -D storybook-stylesheet-toggle

Install the addon in .storybook/main.js:

module.exports = {
  addons: ["storybook-stylesheet-toggle"],
};

Add the following configuration to .storybook/preview.js:

import { addParameters } from '@storybook/react';

addParameters({
  stylesheetToggle: {
    stylesheets: [
      {
        id: 'first',
        title: 'First stylesheet',
        url: 'path/to/first-sheet.css',
      },
      {
        id: 'second',
        title: 'Second stylesheet',
        url: 'path/to/second-sheet.css',
      },
    ],
  },
});

Ensure the path to your stylesheets is being served by Storybook (with the -s ./path parameter.)

Boot Storybook, and you should now see a paintbrush menu, allowing you to toggle between the stylesheets you've configured. The first stylesheet will be applied by default.

Join the community
6,060 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI