https://github.com/letshare/storybook-addon-customize-antd-theme

a Storybook addon help you visually customize an ant design theme
https://github.com/letshare/storybook-addon-customize-antd-theme

Last synced: about 2 months ago
JSON representation

a Storybook addon help you visually customize an ant design theme

• Host: GitHub
• URL: https://github.com/letshare/storybook-addon-customize-antd-theme
• Owner: letshare
• License: mit
• Created: 2021-09-24T03:38:17.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-10-10T06:46:05.000Z (over 1 year ago)
• Last Synced: 2024-10-28T17:12:41.027Z (3 months ago)
• Language: TypeScript
• Size: 4.25 MB
• Stars: 31
• Watchers: 3
• Forks: 2
• Open Issues: 4
• Metadata Files:
  • Readme: README-zh_CN.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-ant-design - storybook-addon-customize-antd-theme - a Storybook addon help you visually customize an ant design theme. (Theming)

README

        


[![npm version](https://badge.fury.io/js/storybook-addon-customize-antd-theme.svg)](https://badge.fury.io/js/storybook-addon-customize-antd-theme)

[![GitHub license](https://img.shields.io/github/license/letshare/storybook-addon-customize-antd-theme.svg)](https://github.com/letshare/storybook-addon-customize-antd-theme/blob/master/LICENSE)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)





## storybook-addon-customize-antd-theme

一个[Storybook](https://github.com/storybooks/storybook)插件， 它可以辅助你可视化定制 ant design 主题。

- [Docs & Demo](https://letshare.github.io/storybook-addon-customize-antd-theme)

[English](./README.md) | 简体中文

## 要求

- Storybook@>=6.0.0

## 使用

### 1. 安装

```sh

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

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

```

### 2. 在 `main.js` 注册本插件

另外建议导入本插件的一个 antd story`storybook-addon-customize-antd-theme/dist/esm/stories/index.js`

```js

module.exports = {

  stories: ['storybook-addon-customize-antd-theme/dist/esm/stories/index.js'],

  addons: ['storybook-addon-customize-antd-theme'],

};

```

### 3. 设置 story 的默认状态

你可以在 preview.js 初始化导入一个 ant design 主题，在`parameters`上设置属性`customizeAntdTheme`：

```js

// .storybook/preview.js

export const parameters = {

  customizeAntdTheme: {

    modifyVars: {

      'primary-color': '#ff1771',

      'border-radius-base': '20px',

    },

  },

};

```

`modifyVars` 也可以是 less string，可以通过 webpack 插件`raw-loader`导入一个 antd design 主题 less 文件，例如：

```js

// .storybook/preview.js

import themeLess from '!!raw-loader!../src/theme/theme.less';

export const parameters = {

  customizeAntdTheme: {

    modifyVars: themeLess,

  },

};

```