JSPM

storybook-addon-theme-changer

0.2.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 65
  • Score
    100M100P100Q75753F
  • License MIT

A Storybook addon for switching different themes (ex. daisyUI etc.)

Package Exports

  • storybook-addon-theme-changer
  • storybook-addon-theme-changer/manager
  • storybook-addon-theme-changer/package.json
  • storybook-addon-theme-changer/preset
  • storybook-addon-theme-changer/preview

Readme

Storybook Addon Theme Changer

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",
     ...
    ],
},