Stitches Theme Selector

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

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 ☕