Nancy's Preferred Machete

    multiple-themes-stitches
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.10 • Public • Published

    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 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

    Install

    npm i multiple-themes-stitches

    DownloadsWeekly Downloads

    486

    Version

    0.0.10

    License

    MIT

    Unpacked Size

    32.9 kB

    Total Files

    25

    Last publish

    Collaborators

    • sho-ai.michael.machiah