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 Theme Changer
A Storybook addon for switching different themes (ex. daisyUI etc.)
npm install storybook-addon-theme-changer
Last updated about 2 months ago
498
Downloads per week
Readme View on GitHub

Storybook Addon Theme Changer

GitHub Workflow Status npm NPM Auto Release

A simple addon for changing theme on Storybook. Inspired by theme-change

Animation

This addon just controls themes (for example, light and dark), just adding data-theme attribute to the html tag.

It works nicely with UI libraries such as daisyUI.

Support Storybook 8

Getting Started

Add this addon to the .storybook/main.js (main.ts) file.

module.exports = {
  ...
 addons: [
     // your addons here
     "storybook-addon-theme-changer"
  ],
};

Add your themes to the .storybook/preview.js (preview.ts) file

...
export const globalTypes = {
 themes: {
   defaultValue: [
     "light",
     "dark",
     ...
   ],
 },

or

...
export const globals = {
    themes: [
     "light",
     "dark",
     ...
    ],
},
Join the community
6,622 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetry
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI