2.3 KiB
| order | title |
|---|---|
| 4 | Customize theme |
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.
Less variables
We are using Less as development language of style. A series of less variables are defined for each design tokens which can be customized as your needs.
Please report issue if the variables is not enough for you.
How to use it
We recommand modifyVars to override the default variables. There are two way to achieve it in practive.
You can run this example for playground.
1) package.theme (recommanded)
Specify the theme field in 'package.json', which could be a object or file path.
"theme": {
"@primary-color": "#1DA57A",
},
or:
"theme": "./theme.js", // https://github.com/ant-design/antd-init/blob/master/examples/customize-antd-theme/theme.js
This way is working only when using atool-build(built in antd-init and dva-cli). If you choose other boilerplates, you can write webpack config about less-loader modifyVars like atool-build 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.
2) less
Override variables via less definition files.
Create a standalone less file like below, and import it in your project.
@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.