Customize Theme

Ant Design allows you 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 for styling. A set of less variables are defined for each design aspect that can be customized to your needs.

You can use the theme define file of react version in ng-zorro-antd too.

Customize theme with schematics#

Run ng add ng-zorro-antd --theme,then modified the file src/theme.less.

Without schematics#

Create a standalone less file named theme.less in src folder, and add the path of it to the list of styles in angular.json file.

...
  "styles": [
    ...
    "src/theme.less"
    ...
  ]
...

Here is an example of theme.less

The base color is changed to #f5222d in the example below.

// -------- import official less file -----------
@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";

// -------- override less var -----------
@primary-color          : #f5222d;

All less vars can be checked here is a sample of theme define file.