Stitches Theme Selector

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

!theme-selector

$3

Install the following npm module:
``bash
npm install multiple-themes-stitches
`
or with yarn:
`bash
yarn add -D multiple-themes-stitches
`

$3

##### Step 1: Add the addon
Add the addon to the config in your .storybook/main.ts file
`js
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`
`js
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
`js
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

Michael Machiah

Noah Belahcen

Mathis Obadia

Made with ☕