---

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

Requirements

- Storybook@>=6.0.0

Getting started

$3

``sh
npm install -D storybook-addon-customize-antd-theme


yarn add -D storybook-addon-customize-antd-theme


`

$3

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

$3

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

`js
// .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:

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