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 over 4 years ago
519
Downloads per week
Readme View on GitHub

This package has become deprecated

This package is no longer being maintained and has stopped active development.

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
6,587 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI