New
Community Showcase #5Visual test with Chromatic
Star78,835
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@carbon/storybook-addon-theme
Carbon theme switcher for Storybook
npm install @carbon/storybook-addon-theme
Last updated 11 days ago
141
Downloads per week
Readme View on GitHub

Storybook addon for Carbon themes

This addon for storybook allows you to change the theme used with Carbon Components!

Supports

  • React
  • Vue

Install

npm install @carbon/storybook-addon-theme

Requirements

  • Use of Carbon Components
  • Use of Custom CSS Properties feature flag

🙌 Contributing

We are always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide and Carbon's Developer Handbook! 👀

Usage

.storybook/main.js:

module.exports = {
  addons: ['@carbon/storybook-addon-theme/register'],
};

Use with a feature flag switch is possible if you construct the addons array.

const addons = [
  /* other addons */
];

if (process.env.CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES === 'true') {
  addons.push('@carbon/storybook-addon-theme/register');
}

module.exports = {
  addons,
  stories: ['../src/**/*-story.js', '../src/**/*.stories.mdx'],
};

Global Decorator

.storybook/preview.js:

import { withCarbonTheme } from '@carbon/storybook-addon-theme'; // for React
// import { withCarbonTheme } from '@carbon/storybook-addon-theme/vue'; // for Vue
// for Angular (not yet supported)
// .
// for all (including story decorators)
import index from './index.scss';
// .
addDecorator(withCarbonTheme);
// .
// Adding the decorator
const decorators = [withCarbonTheme];
const parameters = {
  carbonTheme: {
    theme: 'g10',
  },
};
export { decorators, parameters };
// Older storybook versions
addParameters({
  // optional
  carbonTheme: {
    theme: 'g10', // optional default carbon theme
    themes: ['g10', 'g90'], // optional carbonTheme filter
  },
});

Story decorator

import { withCarbonTheme } from '@carbon/storybook-addon-theme'; // for React
// import { withCarbonTheme } from '@carbon/storybook-addon-theme/vue'; // for Vue
// for Angular
// .
// .
// .
storiesOf('Component', module)
  .addDecorator(withCarbonTheme)
  .add(() => story, {
    carbonTheme: {
      // optional
      theme: 'g10', // optional default carbon theme
      themes: ['g10', 'g90'], // optional carbonTheme filter (additive to global)
    },
  });

SCSS

.storybook/index.scss

@import '@carbon/themes/scss/themes';

:root {
  @include carbon--theme(
    $theme: $carbon--theme--white,
    $emit-custom-properties: true
  );
}

:root[storybook-carbon-theme='g10'] {
  @include carbon--theme(
    $theme: $carbon--theme--g10,
    $emit-custom-properties: true
  );
}

:root[storybook-carbon-theme='g90'] {
  @include carbon--theme(
    $theme: $carbon--theme--g90,
    $emit-custom-properties: true
  );
}

:root[storybook-carbon-theme='g100'] {
  @include carbon--theme(
    $theme: $carbon--theme--g100,
    $emit-custom-properties: true
  );
}
Join the community
6,179 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI