storybook-theme-toggle

    0.1.2 • Public • Published

    Storybook Theme Toggle

    This addon can be used to set a data attribute in Storybook's iframe html element triggering a toggle between dark and light mode.

    This requires appropriate configuration in your project.

    Use case:

    You have a React app using next-themes, to manage theming, which adds a data attribute on the html element, which you can use to style your app.

    You bundle your css in a single file and load it in storybook.

    // .storybook/preview.ts
    import './styles.css';

    Your bundled css contains dark and light mode styles.

    You have something like that in your main css file:

    :root {
        --background: white;
        --foreground: black;
    }
    
    [data-color-theme='dark'] {
        --background: black;
        --foreground: white;
    }

    ⚠️ Warning! At the moment this addon only works with data-color-theme attribute name.

    This will be configurable in the future.

    Installation

    Requires Storybook 6.1 or later.

    Install the module using npm:

    npm i -D storybook-theme-toggle

    or with yarn:

    yarn add -D storybook-theme-toggle

    Then, add the following content to .storybook/main.js:

    module.exports = {
        addons: ['storybook-theme-toggle'],
    };

    Usage

    Click on the new theme toggle in the toolbar to toggle between dark and light mode.

    You may want to create a custom Layout component using your app's canvas styles for better results.

    Install

    npm i storybook-theme-toggle

    DownloadsWeekly Downloads

    818

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    14.3 kB

    Total Files

    13

    Last publish

    Collaborators

    • antoniszisis