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 addon to the config in your .storybook/main.ts file

const config: StorybookConfig = {
  // other config ...
  addons: [
    "multiple-themes-stitches",
    // other addons
  ],
};
export default config;

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.ts and then pass the Stitches Themes to the addon via the parameters property

import { Preview } from '@storybook/react';
import { darkTheme, lightTheme } from "../stitches.config";
import { ThemesParameter } from "multiple-theme-stitches";

const multipleThemesStitches: ThemesParameter = {
  values: [
    {
      name: "Light",
      theme: lightTheme,
    },
    {
      name: "Dark",
      theme: darkTheme,
    },
  ],
  // optionally add the default theme name
  default: "Light"
}
const preview: Preview = {
  parameters: {
    multipleThemesStitches,
    // other parameters
  },
};

export default preview;

Storybook Version

Here are the storybook versions that correspond to each version of the multiple-themes-stitches package: 0.0.0 => storybook < 7 1.0.0 => storybook version 7.0.0 2.0.0 => storybook version 8.0.0

Contributors ✨

Thanks go to these wonderful people

Made with ☕