Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Theme switcher tool addon that changes the theme using CSS custom properties
npm install storybook-theme-css-vars
Last updated 8 months ago
Downloads per week
Readme View on GitHub

Storybook Theme CSS Custom Properties

Storybook theme css vars

This addon can be used to set a data attribute in Storybook's iframe HTML element triggering a toggle between dark and light theme.

Example styles:

:root {
  --white: #fff;
  --black: #000;

:root [data-theme="dark"] {
  --white: #000;
  --black: #fff;


npm i -D storybook-theme-css-vars

Add the addon to .storybook/main.js:

module.exports = {
  addons: ["storybook-theme-css-vars"],

Add parameters options to .storybook/preview.js:

export const parameters = {
  theme: {
    selector: "body (or your selector with data attribute)",
    dataAttr: "data-theme (or your data attribute)",
    nameLightTheme: "light (or your name of light theme)",
    nameDarkTheme: "dark (or your name of dark theme)",
  • nameLightTheme (optional, default — "light")
  • nameDarkTheme: (optional, default — "dark")


Click on the new theme toggle in the toolbar to toggle between dark and light mode.

Join the community
6,580 developers and counting
WhyWhy StorybookComponent-driven UI
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software

Maintained by
Special thanks to Netlify and CircleCI