Stitches Theme Selector
An addon that allows to see a same Story using different Stitches theme variables.
npm install multiple-themes-stitches
387
Downloads per week
Readme View on GitHub
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 ☕