Storybook Addon Themes

Greatly inspired by @storybook/addon-backgrounds.

This Storybook Theme Decorator can be used to add a custom HTML class or classes to the the preview in Storybook.

Compatibility

This version is compatible with storybook version 5.x.x.

Installation

npm i -D storybook-addon-themes

Getting started

Then, configure it as an addon by adding it to your addons.js file (located in the Storybook config directory):

import 'storybook-addon-themes/register';

Configuration

Configure the themes in your stories like this:

import { storiesOf } from '@storybook/react'; // <- or your storybook framework
 
storiesOf('Button', module)
  .addParameters({
    themes: [
      { name: 'twitter', class: 'theme-twt', color: '#00aced', default: true },
      { name: 'facebook', class: 'theme-fb', color: '#3b5998' },
    ],
  })
  .add('with text', () => <button>Click me</button>);

Or globally in the config.js file:

import { addParameters } from '@storybook/react'; // <- or your storybook framework
 
addParameters({
  themes: [
    { name: 'twitter', class: 'theme-twt', color: '#00aced', default: true },
    { name: 'facebook', class: 'theme-fb', color: '#3b5998' },
  ],
});

And if you want to override themes for a single story or group of stories, pass the themes parameter:

import { storiesOf } from '@storybook/react';
 
storiesOf('Button', module)
  .add('with text', () => <button>Click me</button>, {
    themes: [{
      name: 'red', class: 'theme-red', color: 'rgba(255, 0, 0)',
    }]
  });

If you don't want to use themes for a story, you can set the themes parameter to [], or use { disable: true } to skip the addon:

import { storiesOf } from '@storybook/react';
 
storiesOf('Button', module)
  .add('example 1', () => <button>Click me</button>, {
    themes: [],
  });
 
storiesOf('Button', module)
  .add('example 2', () => <button>Click me</button>, {
    themes: { disable: true },
  });

Also you can add multiple classes by passing an array in class parameter:

import { storiesOf } from '@storybook/react';
 
storiesOf('Button', module)
  .addParameters({
    themes: [
      { name: 'twitter', class: ['theme-twt', 'light-mode'], color: '#00aced', default: true },
      { name: 'facebook', class: ['theme-fb', 'dark-mode'], color: '#3b5998' },
    ],
  })
  .add('with text', () => <button>Click me</button>);

Usage with decorator

By default the classes will be added to the body element.

But in this case your theme will not be visible by other addons (like @storybook/addon-storyshots).

To fix this you can add the withThemes decorator in your stories:

import { storiesOf } from '@storybook/react'; // <- or your storybook framework
import { withThemes } from 'storybook-addon-themes';
 
storiesOf('Button', module)
  .addDecorator(withThemes)
  .add('with text', () => <button>Click me</button>);

Or setup the decorator globally in the config.js file (located in the Storybook config directory):

import { addDecorator } from '@storybook/react'; // <- or your storybook framework
import { withThemes } from 'storybook-addon-themes';
 
addDecorator(withThemes);

Framework Support Table

	React	React Native	Vue	Angular	Polymer	Mithril	HTML	Marko	Svelte	Riot	Ember	Preact
Usage without decorator	+		+	+	+	+	+	+	+	+	+	+
Usage with decorator	+