CSS Variables Theme
Switch CSS files to change themes
npm install @etchteam/storybook-addon-css-variables-theme
3.4k
Downloads per week

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

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

Add the following content to it:

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

Next, create a file called preview.js in your storybook config.

You will need to import your style files with some some inline loader options. Specifically you will need to call style-loader with ?injectType=lazyStyleTag to it doesn't run the CSS immediately. After than you can chain your preferred CSS/SCSS/Less/etc loaders.

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

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,
      dark,
    }
  }
}

Made with ☕ at Etch

Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify