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, set up custom theme file, 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;

Customize in webpack#

Angular CLI provide custom-webpack-builder, you can modify the less variable via adjust the less-loader options in webpack.

  1. Import ng-zorro-antd.less in angular.json
{
  "styles": [
    "node_modules/ng-zorro-antd/ng-zorro-antd.less"
  ]
}
  1. Install @angular-builders/custom-webpack builder
npm i -D @angular-builders/custom-webpack
  1. create extra-webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test   : /\.less$/,
        loader: 'less-loader',
        options: {
          modifyVars: { // modify theme variable
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px'
          },
          javascriptEnabled: true
        }
      }
    ]
  }
};
  1. Customize builder in angular.json
  "architect": {
    "build": {
-     "builder": "@angular-devkit/build-angular:browser",
+     "builder": "@angular-builders/custom-webpack:browser",
      "options": {
+        "customWebpackConfig": {
+          "path": "./extra-webpack.config.js",
+          "mergeStrategies": {
+            "module.rules": "append"
+          },
+          "replaceDuplicatePlugins": true
+        }
        ...
      },
      ...
    },
    "serve": {
-      "builder": "@angular-devkit/build-angular:dev-server",
+      "builder": "@angular-builders/custom-webpack:dev-server",
       ...
    }
    ...
  }

You can get more information about custom-webpack builder following the articles

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