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 2 months ago
543
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 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


Michael Machiah

Noah Belahcen

Mathis Obadia

Made with ☕

Join the community
6,615 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI