New
Storybook for full-stack developersAutomate with Chromatic
Star75,299
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-theme-toggle
Add data attribute in html tag to toggle between dark/light modes.
npm install storybook-theme-toggle
Last updated almost 2 years ago
423
Downloads per week
Readme View on GitHub

Storybook Theme Toggle

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

This requires appropriate configuration in your project.

Use case:

You have a React app using next-themes, to manage theming, which adds a data attribute on the html element, which you can use to style your app.

You bundle your css in a single file and load it in storybook.

// .storybook/preview.ts
import './styles.css';

Your bundled css contains dark and light mode styles.

You have something like that in your main css file:

:root {
    --background: white;
    --foreground: black;
}

[data-color-theme='dark'] {
    --background: black;
    --foreground: white;
}

:warning: Warning! At the moment this addon only works with data-color-theme attribute name.

This will be configurable in the future.

Installation

Requires Storybook 6.1 or later.

Install the module using npm:

npm i -D storybook-theme-toggle

or with yarn:

yarn add -D storybook-theme-toggle

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

module.exports = {
    addons: ['storybook-theme-toggle'],
};

Usage

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

You may want to create a custom Layout component using your app's canvas styles for better results.

Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI