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.
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#
ng add ng-zorro-antd --theme，then modified the file
Create a standalone less file named
src folder, and add the path of it to the list of
... "styles": [ ... "src/theme.less" ... ] ...
Here is an example of
The base color is changed to
#f5222din 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.