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-background-themes
Switch between themes based on CSS custom properties
npm install storybook-addon-background-themes
Last updated almost 3 years ago
5
Downloads per week
Readme View on GitHub

Storybook Addon Background Themes

Storybook Addon Background Themes can be used to change themes inside the preview in Storybook. The themes are simple sets of CSS custom properties.

Installation

npm i -D storybook-addon-background-themes

Configuration

Then, add following content to .storybook/main.js:

module.exports = {
  addons: ['storybook-addon-background-themes'],
};

Usage

Add a backgroundThemes property to the configuration aparameters of preview.js:

export const parameters = {
  backgroundThemes: {
    base: {
      // CSS custom properties that will be applied for each theme
      "--some-base-custom-property": "blue",
    },
    themes: [
      {
        name: "Light",
        previewValue: "#000",
        properties: {
          "--some-custom-property-for-light-mode": "#fff"
        },
      },
      {
        name: "Dark",
        previewValue: "#000",
        properties: {
          "--some-custom-property-for-dark-mode": "#000"
        },
      },
    ],
  },
};
Join the community
6,588 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