ant-design/docs/react/customize-theme.en-US.md

order	title
5	Customize Theme

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.

Less variables

We are using Less as the development language of style. A set of less variables are defined for each design aspect that can be customized to your needs.

• Default Variables

Please report an issue if the existing list of variables is not enough for you.

How to do it

We recommend modifyVars to override the default values of the variables. There are two ways to achieve it in practice.

You can use this example as a playground.

1) Using theme property (recommended way)

Specify the theme property in package.json or .roadhogrc 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:

"theme": {
  "primary-color": "#1DA57A",
},

• example of specifying a file path to a JS file:

"theme": "./theme.js",

This approach is available only when using antd-init or dva-cli. If you choose other boilerplates, you can write webpack config about less-loader modifyVars like atool-build does.

Note:

• Importing style from less files is necessary. Here's an example if you're using the antd-demo from getting started: in index.js, replace import './index.css' with import 'antd/dist/antd.less'
• Please specify the style option of babel-plugin-import to be true, instead of css. This is required for importing the less version of antd. This can be done in webpack.config.js.
• When using dva-cli@0.7.0+, you should add the theme block to .roadhogrc instead of package.json.
• If you want to override @icon-url, the quotes must be contained in value like "@icon-url": "'your-icon-font-path'" (A fix sample).

2) Overriding Less variables (alternative way)

Override variables via less definition files.

Create a standalone less file like the one 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 the styles of all components, regardless of your demand, which cause style option of babel-plugin-import not working.