https://github.com/etorhub/storybook-addon-styled-themes

A storybook addon to switch between different style themes
https://github.com/etorhub/storybook-addon-styled-themes

less react storybook storybook-addon theme-development

Last synced: 26 days ago
JSON representation

A storybook addon to switch between different style themes

• Host: GitHub
• URL: https://github.com/etorhub/storybook-addon-styled-themes
• Owner: etorhub
• License: mit
• Created: 2018-06-04T12:57:06.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-06-04T12:58:53.000Z (over 6 years ago)
• Last Synced: 2024-11-10T16:05:19.155Z (3 months ago)
• Topics: less, react, storybook, storybook-addon, theme-development
• Language: JavaScript
• Size: 5.86 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Storybook Addon Styled Themes

Greatly inspired by [Tonai](https://github.com/tonai)'s [Storybook Addon Themes](https://github.com/tonai/storybook-addon-themes).

This Storybook Theme Decorator can be used to add a custom styles to the the preview in [Storybook](https://storybook.js.org).

This addon works with Storybook for:

-   [React](https://github.com/storybooks/storybook/tree/master/app/react)

## Installation

```sh

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

```

## Configuration

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

  Add following content to it:

  ```js

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

```

## Usage

Then write your stories like this:

```js

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", () => Click me);

```

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