New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,440
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Stitches Theme Selector
An addon that allows to see a same Story using different Stitches theme variables.
npm install multiple-themes-stitches
Last updated 8 months ago
479
Downloads per week
Readme View on GitHub

Stitches Theme Selector

A storybook addon that allows your users to change the theme inside the preview.

theme-selector

Installation

Install the following npm module:

npm install multiple-themes-stitches

or with yarn:

yarn add -D multiple-themes-stitches

Configuration

Step 1: Add the addon

Add the following content to .storybook/main.js.

module.exports = {
  addons: ['multiple-themes-stitches']
};
Step 2: Add the Themes

Add your themes to your stitches.config.ts

const { createTheme } = createStitches({...});

const darkTheme = createTheme({
  colors: {
    primary: 'rgba(250,55,90,1)',
    secondary: 'rgba(65,125,165,1)',
  },
});

const lightTheme = createTheme({
  colors: {
    primary: 'rgba(65,125,165,1)',
    secondary: 'rgba(245,55,90,1)',
  },
});

const customTheme = createTheme({
  colors: {
    primary: 'rgba(245,100,5,1)',
    secondary: 'rgba(65,125,165,1)',
  },
});

And import your stitches Themes to .storybook/preview.js.

import { lightTheme, darkTheme, customTheme } from '../src/stitches.config'

Then pass the Stitches Themes to the addon via the exported parameters.

export const parameters = {
  multipleThemesStitches: {
    values: [
      { 
        name: 'Light', 
        theme: lightTheme
      },
      { 
        name: 'Dark', 
        theme: darkTheme
      },
      { 
        name: 'Custom', 
        theme: customTheme
      }
    ]
  },
}

Contributors ✨

Thanks go to these wonderful people


Michael Machiah

Noah Belahcen

Made with ☕

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI