npm install storybook-addon-themes-custom
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 | + |