Customize antd theme

storybook-addon-customize-antd-theme

A Storybook addon that help you visually customize an ant design theme in the addon panel for better UI-development workflow.

• Docs & Demo

English | 简体中文

Requirements

• Storybook@>=6.0.0

Getting started

1. Install

npm install -D storybook-addon-customize-antd-theme
# yarn add -D storybook-addon-customize-antd-theme

2. Register the addon in main.js

module.exports = {
  stories: ['storybook-addon-customize-antd-theme/dist/esm/stories/index.js'],
  addons: ['storybook-addon-customize-antd-theme'],
};

3. Setting default story states

You can initial setup ant design theme, by setting the customizeAntdTheme property on parameters:

// .storybook/preview.js

export const parameters = {
  customizeAntdTheme: {
    modifyVars: {
      'primary-color': '#ff1771',
      'border-radius-base': '20px',
    },
  },
};

modifyVars can also be less string, you can import a less file by raw-loader, for example:

// .storybook/preview.js
import themeLess from '!!raw-loader!../src/theme/theme.less';
export const parameters = {
  customizeAntdTheme: {
    modifyVars: themeLess,
  },
};