定制主题

NG-ZORRO-MOBILE 设计规范上支持一定程度的样式定制,以满足业务和品牌上多样化的视觉需求,包括但不限于主色、圆角、边框和部分组件的视觉定制。

定制主题 - 图1

定制方式

Ant Design 的样式使用了 Less 作为开发语言,并定义了一系列全局/组件的样式变量,你可以根据需求进行相应调整,默认样式变量

Ant Design React 的主题定制文件在 ng-zorro-antd-mobile 中同样可以使用。

初始化项目时定制主题

在初始化项目时 ng add ng-zorro-antd-mobile —theme 即可自动配置好自定义主题的相关文件,修改 src/theme.less 文件内容就可以自定义主题。

注意:使用 ng add ng-zorro-antd-mobile —theme 时会自动降级 less2.7 版本

手动修改

src 目录下建立一个单独的 theme.less 文件,在 angular.json 文件的 styles 列表加入该文件

注意:由于 less3.0 以上版本默认禁用了 javascriptEnabled,需要手动降级 less2.7 版本

  1. ...
  2. "styles": [
  3. ...
  4. "src/theme.less"
  5. ...
  6. ]
  7. ...

theme.less 样例如下

在样例中通过修改 @brand-primary 的数值将 ng-zorro-antd-mobile 的基础色修改为 #f5222d,开发者可以根据实际需求自由修改。

  1. // -------- 引入官方提供的 less 样式入口文件 -----------
  2. @import '../node_modules/ng-zorro-antd-mobile/src/ng-zorro-antd-mobile.less';
  3. // -------- 自定义参数覆盖 -----------
  4. @brand-primary: #f5222d;

全部可被自定义 less 变量可以参考 这里

本地部署字体

src/theme.less 文件中修改 @icon-url 变量, 可以将字体部署到本地,最新的 iconfont 可以在 这里 下载。

例如通过以下设置可以将字体文件的部署位置指向 assets/fonts 文件夹下的 iconfont 文件

  1. // -------- 引入官方提供的 less 样式入口文件 -----------
  2. @import '../node_modules/ng-zorro-antd-mobile/src/ng-zorro-antd-mobile.less';
  3. // -------- 自定义参数覆盖 -----------
  4. @icon-url : "/assets/fonts/iconfont";