Ant Design allow to customize some basic design tokens for meeting the needs of UI diversity from bussiness and brand, including primary color, border radius, border and etc.
Ant Design allows to customize some basic design aspects in order to meet the needs of UI diversity from business and brand, including primary color, border radius, border color, etc.
We are using [Less](http://lesscss.org/) as development language of style. A series of less variables are defined for each design tokens which can be customized as your needs.
We are using [Less](http://lesscss.org/) as the development language of style. A set of less variables are defined for each design aspect that can be customized to your needs.
Please report issue if the variables is not enough for you.
Please report an issue if the existing list of variables is not enough for you.
## How to use it
We recommand [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) to override the default variables. There are two way to achieve it in practive.
We recommend [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) to override the default values of the variables. There are two ways to achieve it in practice.
You can run this [example](https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme) for playground.
You can use this [example](https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme) as a playground.
### 1) package.theme (recommanded)
Specify the `theme` field in 'package.json', which could be a object or file path.
### 1) Using 'theme' property in package.theme (recommended way)
Specify the `theme` property in `package.json` file, whose value can be either an object or the path to a JS file that contains the custom values of specific variables:
- example of directly specifying the custom values as an object:
```js
"theme": {
"@primary-color": "#1DA57A",
},
```
or [a js file](https://github.com/ant-design/antd-init/blob/master/examples/customize-antd-theme/theme.js)：
- example of specifying a [file path](https://github.com/ant-design/antd-init/blob/master/examples/customize-antd-theme/theme.js) to a JS file:
```js
"theme": "./theme.js",
```
This way is working only when using [atool-build](https://github.com/ant-tool/atool-build)(built in [antd-init](https://github.com/ant-design/antd-init) and [dva-cli](https://github.com/dvajs/dva-cli)). If you choose other boilerplates, you can write webpack config about [less-loader modifyVars](https://github.com/webpack/less-loader#less-options) like [atool-build ](https://github.com/ant-tool/atool-build/blob/a4b3e3eec4ffc09b0e2352d7f9d279c4c28fdb99/src/getWebpackCommonConfig.js#L131-L138) does.
This approach is working only when using [atool-build](https://github.com/ant-tool/atool-build)(built in [antd-init](https://github.com/ant-design/antd-init) and [dva-cli](https://github.com/dvajs/dva-cli)). If you choose other boilerplates, you can write webpack config about [less-loader modifyVars](https://github.com/webpack/less-loader#less-options) like [atool-build ](https://github.com/ant-tool/atool-build/blob/a4b3e3eec4ffc09b0e2352d7f9d279c4c28fdb99/src/getWebpackCommonConfig.js#L131-L138) does.
Note: importing less style is necessary. Please specify `style` option of `babel-plugin-import` to be `true` or `less` if you are using it.
Note: Importing less style is necessary. Please specify `style` option of `babel-plugin-import` to be `true` or `less` if you are using it.
### 2) less
### 2) Overriding Less variables (alternative way)
Override variables via less definition files.
Create a standalone less file like below, and import it in your project.
Create a standalone less file like the one below, and import it in your project.
```css
@import "~antd/dist/antd.less"; // import official less entry file
@import "your-theme-file.less"; // override variables here
```
Note: this way will load style of all component regardless of your demand, which cause `style` option of `babel-plugin-import` not working.
Note: This way will load the styles of all components, regardless of your demand, which cause `style` option of `babel-plugin-import` not working.
偏右
8 years ago
GitHub