New
NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Star75,376
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-emotion-theme
storybook addon with emotion theme
npm install storybook-addon-emotion-theme
Last updated about 3 years ago
1.3k
Downloads per week
Readme View on GitHub

Installation

yarn add storybook-addon-emotion-theme --dev

Add to .storybook/addons.js

import 'storybook-addon-emotion-theme/dist/register';

addDecorator to .storybook/config.js

import { addDecorator } from '@storybook/react';
import { withThemesProvider } from 'storybook-addon-emotion-theme';

const themes = [theme1, theme2];
addDecorator(withThemesProvider(themes));

or

addDecorator to stories

import {withThemesProvider} from 'storybook-addon-emotion-theme';

const themes = [theme1, theme2];

storiesOf("demo", module)
  .addDecorator(withThemesProvider(themes))
  .add("demo div", () => <div>DEMO</div>);

Reminder

Make sure every theme has a name property. For example:

const myTheme = {
  name: "Light",
  primaryColor: "blue"
}

This is used for displaying in the Storybook UI.

Contributing

yarn

yarn build

yarn example

Thanks

Thanks to Carlos for making storybook-addon-styled-component-theme upon which this library was based on top of.

Join the community
5,862 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI