要给现有使用ng-zorro框架的前端项目添加自定义主题,首先将整个前端源码备份。在项目目录下,执行命令行:

ng add ng-zorro-antd --theme

重新下载ng-zorro-antd后,用ng serve命令启动服务,发现编译错误。找到错误文件app-module.ts,将本文件备份的内容拷贝回来(ng工具有bug,自动插入的内容位置总是错行)。这时启动成功,但运行后发现是ng-zorro的默认界面,就一个图标。打开app.component.html,将备份的同文件内容拷贝回来。这是页面显示正常。(注意:最好在项目开始的时候就采用--theme参数下载ng-zorro框架,后期重新下载后导致代码冲突,必须手动修复)

查看源码,发现在src目录下增加了一个theme.less文件,打开进行修改即可调整整个项目的主题。

@import "../node_modules/ng-zorro-antd/src/ng-zorro-antd.less";
// The prefix to use on all css classes from ant.
@ant-prefix             : ant;

// -------- Colors -----------
@primary-color          : #db267b;
@info-color             : @blue-6;
@success-color          : @green-6;
@processing-color       : @blue-6;
@error-color            : @red-6;
@highlight-color        : @red-6;
@warning-color          : @gold-6;
@normal-color           : #d9d9d9;

这里只调整了@primary-color的颜色(默认是@blue-6)。

查看前端界面:

ng-zorro自定义主题

将@primary-color的值恢复为@blue-6,效果如下:

ng-zorro自定义主题

 如配置不生效,查看angular.json文件,注释掉style对象中的"node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css”内容。

相关文章: