Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Switch between multiple themes for you components in Storybook
npm install @storybook/addon-themes
Last updated 4 days ago
Downloads per week
Made by Storybook
Readme View on GitHub


Storybook Addon Themes can be used which between multiple themes for components inside the preview in Storybook.

React Storybook Screenshot


Requires Storybook 7.0 or later. If you need to add it to your Storybook, you can run:

npm i -D @storybook/addon-themes

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

export default {
  addons: ['@storybook/addon-themes'],

👇 Tool specific configuration

For tool-specific setup, check out the recipes below

Don't see your favorite tool listed? Don't worry! That doesn't mean this addon isn't for you. Check out the "Writing a custom decorator" section of the api reference.

❗️ Overriding theme

If you want to override your theme for a particular component or story, you can use the themes.themeOverride parameter.

import React from 'react';
import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    themes: {
      themeOverride: 'light', // component level override

export const Primary = {
  args: {
    primary: true,
    label: 'Button',

export const PrimaryDark = {
  args: {
    primary: true,
    label: 'Button',
  parameters: {
    themes: {
      themeOverride: 'dark', // Story level override
Join the community
6,613 developers and counting
WhyWhy StorybookComponent-driven UI
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software

Maintained by
Special thanks to Netlify and CircleCI