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
CSS Variables Theme
Switch CSS files to change themes
npm install @etchteam/storybook-addon-css-variables-theme
Last updated 17 days ago
12.3k
Downloads per week
Readme View on GitHub

Storybook Addon CSS Variables Theme

Storybook CSS Variables Theme can be used to switch out CSS files in Storybook.

React Storybook Screenshot

Installation

npm install @etchteam/storybook-addon-css-variables-theme --save-dev

Configuration

Step 1: Add the addon

Create a file called main.js in your .storybook folder.

Add the following code to it:

module.exports = {
  addons: ['@etchteam/storybook-addon-css-variables-theme'],
};

Step 2: Include your CSS files

Create a file called preview.js in your .storybook folder.

In this file you will need to import your style files using a loader. Here's an example of how to do this:

import light from '!!style-loader?injectType=lazyStyleTag!css-loader!../src/styles/light.css'
import dark from '!!style-loader?injectType=lazyStyleTag!css-loader!../src/styles/dark.css'

This code calls style-loader with ?injectType=lazyStyleTag so that it doesn't run the CSS immediately.

You can swap out css-loader for your preferred SCSS/Less/etc loaders.

Step 3: Add the Decorator

In the same preview.js file import the decorator from the CSS Variables Theme addon

import cssVariablesTheme from '@etchteam/storybook-addon-css-variables-theme'

export const decorators = [
  cssVariablesTheme,
];

Then pass the CSS files to the addon via the exported parameters.

export const parameters = {
  cssVariables: {
    files: {
      'Light Theme': light,
      'Dark Theme': dark,
    }
  }
}

If a default theme should be selected from first load add 'defaultTheme' to the options.

export const parameters = {
  cssVariables: {
    files: {
      'Light Theme': light,
      'Dark Theme': dark,
    },
    defaultTheme: 'Light Theme'
  }
}

How to

Set a specific theme for a story

Pass the theme key as the theme parameter on the story to default to a specific theme:

export default {
  title: 'Example/Header',
  component: Header,
  parameters: {
    cssVariables: {
      theme: 'dark'
    }
  }
};

Get the currently enabled theme within stories

Watch the custom storybookcssvariables:theme:change event on the document.

document.addEventListener(
  'storybookcssvariables:theme:change',
  (event: CustomEvent) => {
    console.info(`The theme changed to ${event?.detail?.theme}`);
  },
);

Made with ☕ at Etch

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