@rize-finance/storybook-addon-dynamic-theme
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.5 • Public • Published

    @rize-finance/storybook-addon-dynamic-theme

    Match the Storybook UI theme with your dynamic, context-based component theme.

    change theme

    This addon works together with the excellent contexts addon to apply your custom theme's colors to the Storybook UI theme.

    To use it:

    • set up the contexts addon as described in its README.

    • install this addon

      yarn add -D @rize-finance/storybook-addon-dynamic-theme
      
    • register via the addons section of main.js

    • use the addParameters api to set the theme and define the themeTranslation

    Example

    .storybook/main.js

    module.exports = {
      stories: ["../src/**/*.stories.tsx"],
      addons: [
        "@storybook/addon-contexts/register",
        "@rize-finance/storybook-addon-dynamic-theme"
      ]
    };

    .storybook/contexts.js

    import { ThemeProvider } from "emotion-theming";
    import { themes } from "../src/style/theme"; // your custom themes
    
    export const themeTitle = "Themes";
    export const themePropName = "theme";
    export const themeDefault = themes.light;
    
    export const contexts = [
      {
        icon: "mirror", // a icon displayed in the Storybook toolbar to control contextual props
        title: themeTitle, // an unique name of a contextual environment
        components: [
          // an array of components that is going to be injected to wrap stories
          ThemeProvider
        ],
        params: [
          // an array of params contains a set of predefined `props` for `components`
          {
            name: "Light Theme",
            props: { [themePropName]: themes.light },
            default: true
          },
          { name: "Dark Theme", props: { [themePropName]: themes.dark } }
        ],
        options: {
          deep: true, // pass the `props` deeply into all wrapping components
          disable: false, // disable this contextual environment completely
          cancelable: false // allow this contextual environment to be opt-out optionally in toolbar
        }
      }
    ];

    .storybook/preview.js

    import React from "react";
    import { addDecorator, addParameters } from "@storybook/react";
    import { create } from "@storybook/theming";
    import { withContexts } from "@storybook/addon-contexts/react";
    import { translateTheme } from "@rize-finance/storybook-addon-dynamic-theme";
    import { contexts, themeTitle, themePropName, themeDefault } from "./contexts";
    
    const baseTheme = create({
      brandTitle: "Components"
    });
    
    const themeTranslation = {
      contextPath: [themeTitle, themePropName],
      static: baseTheme,
      dynamic: {
        base: "colors.base",
        colorPrimary: "colors.main",
        appContentBg: "colors.background",
        appBg: "colors.lineWeak",
        colorSecondary: "colors.secondary",
        appBorderColor: "colors.lineStrong",
        appBorderRadius: "borderRadius",
        fontBase: "fontBase",
        fontCode: "monospace",
        textColor: "colors.text",
        textInverseColor: "colors.textInverse",
        barTextColor: "colors.text",
        barSelectedColor: "colors.textStrong",
        barBg: "colors.line",
        inputBg: "colors.background",
        inputBorder: "colors.line",
        inputTextColor: "colors.text"
      }
    };
    
    const theme = translateTheme(themeDefault, themeTranslation);
    
    addParameters({
      options: { theme },
      themeTranslation
    });
    addDecorator(withContexts(contexts));

    src/style/theme.js

    const light = {
      colors: {
        base: "light",
        main: "red",
        secondary: "blue",
        background: "white",
        lineWeak: "#eee",
        line: "#ddd",
        lineStrong: "#ccc",
        text: "#222",
        textStrong: "#111",
        textInverse: "#eee"
      },
      borderRadius: 0,
      fontBase: '"Open Sans", sans-serif'
    };
    
    const dark = {
      colors: {
        base: "dark",
        main: "blue",
        secondary: "red",
        background: "black",
        lineWeak: "#111",
        line: "#222",
        lineStrong: "#333",
        text: "#ddd",
        textStrong: "#eee",
        textInverse: "#111"
      },
      borderRadius: 0,
      fontBase: '"Open Sans", sans-serif'
    };
    
    export const themes = {
      light,
      dark
    };

    The important part is the themeTranslation object.

    • contextPath : locates the theme within the full context

    • static : parts of the Storybook theme which don't change with context

    • dynamic : mapping from custom theme to Storybook theme

    Install

    npm i @rize-finance/storybook-addon-dynamic-theme

    DownloadsWeekly Downloads

    5

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    12.9 kB

    Total Files

    17

    Last publish

    Collaborators

    • goudarziha
    • gregor71