storybook-multiple-themeprovider

Storybook SC ThemeProvider

Added new features

v1.2.0 - Added preview of the theme selected

The ThemeProvider storybook addon let's you show your Emotion theme on your favourite Storybook UI at runtime.

Getting Started

First, install the addon

yarn add themeprovider-storybook --dev
npm install --save-dev themeprovider-storybook

Add this line to your addons.js file (create this file inside your storybook config directory if needed).

import 'themeprovider-storybook/register';

Set options globally

Import and use the addDecorator in your config.js file.

import { addDecorator, configure } from '@storybook/react';
import { withThemesProvider } from "themeprovider-storybook";

// Options:
const themes = [
  {
    name: 'Theme1' // Required it's used for displaying the button label,
    backgroundColor: '#fff' // Optional, it's used for setting dynamic background color on storybook
    ..., // Your theme keys (Check example if you need some help)
  },
  {
    name: 'Theme2' // Required it's used for displaying the button label,
    backgroundColor: '#000'// Optional, it's used for setting dynamic background color on storybook
    ..., // Your theme keys (Check example if you need some help)
  }
]
addDecorator(withThemesProvider(themes));

configure(() => require('./stories'), module);