Storybook Addon Styled Themes

Greatly inspired by Tonai's Storybook Addon Themes.

This Storybook Theme Decorator can be used to add a custom styles to the the preview in Storybook.

This addon works with Storybook for:

React

Installation

npm i --save storybook-addon-styled-themes

Configuration

Then create a file called addons.js in your storybook config.

Add following content to it:

import 'storybook-addon-styled-themes/register';

Usage

Then write your stories like this:

import React from 'react';
import { storiesOf } from "@storybook/react";
import withThemes from "storybook-addon-styled-themes";

storiesOf("Button", module)
  .addDecorator(withThemes([
    { name: "MyStyle", src: "/your/style/route.less", color: "#00aced", default: true },
    { name: "MyOtherStyle", src: "/your/other/style/route.css", color: "#3b5998" },
  ]))
  .add("with text", () => <button>Click me</button>);

This will load into DOM (by require()) your styles.

Made by

espinacs