# storybook-addon-themes-custom

> A storybook addon to switch between different themes for your preview

Latest version **5.2.0-custom** (published 2019-08-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install storybook-addon-themes-custom
pnpm add storybook-addon-themes-custom
yarn add storybook-addon-themes-custom
bun add storybook-addon-themes-custom
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.2.0-custom |
| Published | 2019-08-07 |
| First published | 2019-08-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 11 |
| Unpacked size | 42.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 85 |
| Author | tonai |
| Maintainers | btober |
| Keywords | addon, theme, react, storybook |

## Links

- npm: https://www.npmjs.com/package/storybook-addon-themes-custom
- Repository: https://github.com/tonai/storybook-addon-themes
- Issues: https://github.com/tonai/storybook-addon-themes/issues
- npm.io page: https://npm.io/package/storybook-addon-themes-custom

## Dependencies (11)

- [react](https://npm.io/package/react.md) ^16.8.4
- [global](https://npm.io/package/global.md) ^4.3.2
- [core-js](https://npm.io/package/core-js.md) ^2.6.5
- [memoizerific](https://npm.io/package/memoizerific.md) ^1.11.3
- [util-deprecate](https://npm.io/package/util-deprecate.md) ^1.0.2
- [@storybook/addons](https://npm.io/package/@storybook/addons.md) ^5.1.0-rc.5
- [@storybook/theming](https://npm.io/package/@storybook/theming.md) ^5.1.0-rc.5
- [@storybook/components](https://npm.io/package/@storybook/components.md) ^5.1.0-rc.5
- [@storybook/core-events](https://npm.io/package/@storybook/core-events.md) ^5.1.0-rc.5
- [@storybook/client-logger](https://npm.io/package/@storybook/client-logger.md) ^5.1.0-rc.5
- [@babel/plugin-syntax-dynamic-import](https://npm.io/package/@babel/plugin-syntax-dynamic-import.md) ^7.2.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 5.2.0-custom (latest) — 2019-08-07

## README

# Storybook Addon Themes

Greatly inspired by [@storybook/addon-backgrounds](https://github.com/storybooks/storybook/tree/next/addons/backgrounds).

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

## Compatibility

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

## Installation

```sh
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):

```js
import 'storybook-addon-themes/register';
```

## Configuration

Configure the themes in your stories like this:

```js
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:

```js
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:

```js
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:

```js
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:

```js
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](https://github.com/storybookjs/storybook/tree/next/addons/storyshots)).

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

```js
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):

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

addDecorator(withThemes);
```

## Framework Support Table

| | [React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)| [Svelte](app/svelte)| [Riot](app/riot)| [Ember](app/ember)| [Preact](app/preact)|
| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
|Usage without decorator |+| |+|+|+|+|+|+|+|+|+|+|
|Usage with decorator    |+| | | | | | | | | | | |

---
_Source: https://npm.io/package/storybook-addon-themes-custom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._