定制主题

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

定制主题 - 图1

定制方式

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

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

初始化项目时定制主题

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

手动修改

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

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

theme.less 样例如下

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

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

在 webpack 中定制主题

Angular CLI 提供了 custom-webpack 的 builder,可以通过该 builder 轻松的调整 webpack 中 less-loader 的配置来进行主题配置。

  1. angular.json 中引入 ng-zorro-antd.less 文件
  1. {
  2. "styles": [
  3. "node_modules/ng-zorro-antd/ng-zorro-antd.less"
  4. ]
  5. }
  1. 安装 @angular-builders/custom-webpack builder
  1. npm i -D @angular-builders/custom-webpack
  1. 新建 webpack 配置文件 extra-webpack.config.js
  1. module.exports = {
  2. module: {
  3. rules: [
  4. {
  5. test : /\.less$/,
  6. loader: 'less-loader',
  7. options: {
  8. modifyVars: { // 修改主题变量
  9. 'primary-color': '#1DA57A',
  10. 'link-color': '#1DA57A',
  11. 'border-radius-base': '2px'
  12. },
  13. javascriptEnabled: true
  14. }
  15. }
  16. ]
  17. }
  18. };
  1. angular.json 中配置自定义 builder
  1. "architect": {
  2. "build": {
  3. - "builder": "@angular-devkit/build-angular:browser",
  4. + "builder": "@angular-builders/custom-webpack:browser",
  5. "options": {
  6. + "customWebpackConfig": {
  7. + "path": "./extra-webpack.config.js",
  8. + "mergeStrategies": {
  9. + "module.rules": "append"
  10. + },
  11. + "replaceDuplicatePlugins": true
  12. + }
  13. ...
  14. },
  15. ...
  16. },
  17. "serve": {
  18. - "builder": "@angular-devkit/build-angular:dev-server",
  19. + "builder": "@angular-builders/custom-webpack:dev-server",
  20. ...
  21. }
  22. ...
  23. }

更多在 Angular CLI 中定制 webpack 的文章可以参考

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

官方主题

我们提供了一些官方主题,欢迎在项目中试用,并且给我们提供反馈。

  • 🌑 暗黑主题(9+ 支持)
  • 📦 紧凑主题(9+ 支持)

方式一

是在样式文件全量引入 ng-zorro-antd.dark.lessng-zorro-antd.compact.less 覆盖主题变量。

  1. @import "~ng-zorro-antd/ng-zorro-antd.dark.less"; // 引入官方提供的暗色 less 样式文件
  2. @import "~ng-zorro-antd/ng-zorro-antd.compact.less"; // 引入官方提供的紧凑 less 样式文件

方式二

如果项目不使用 Less,可在 CSS 文件或者 angular.jsonstyles 字段中,全量引入 ng-zorro-antd.dark.css 或者 ng-zorro-antd.compact.css

样式文件中:

  1. @import "~ng-zorro-antd/ng-zorro-antd.dark.css";

angular.json 中

  1. {
  2. "build": {
  3. "options": {
  4. "styles": [
  5. "node_modules/ng-zorro-antd/ng-zorro-antd.dark.css"
  6. ]
  7. }
  8. }
  9. }

方式三

在 webpack中 使用 less-loader 按需引入

  1. const darkThemeVars = require('ng-zorro-antd/dark-theme');
  2. const compactThemeVars = require('ng-zorro-antd/compact-theme');
  3. module.exports = {
  4. module: {
  5. rules: [
  6. {
  7. test : /\.less$/,
  8. loader: 'less-loader',
  9. options: {
  10. modifyVars: {
  11. 'hack': `true;@import "${require.resolve('ng-zorro-antd/style/color/colorPalette.less')}";`,
  12. ...darkThemeVars,
  13. ...compactThemeVars
  14. },
  15. javascriptEnabled: true
  16. }
  17. }
  18. ]
  19. }
  20. };

主题切换

当使用 @angular/cli 的方式配置主题时必须为每个主题单独打包应用,当你想切换主题而不重新加载应用时(就像这个网站),你可以使用下面的方法将主题编译到单独的样式文件,并在运行时切换:

注意:确保与主题变量相关的样式存在全局样式中,而不是组件样式中,因为组件样式优先级更高将会导致样式无法被覆盖。

  1. 安装依赖
  1. npm i less -D less-plugin-clean-css -D
  1. 编写脚本

以黑暗主题为例,使用 less 编译应用的样式入口文件,并且在 modifyVars 参数中替换样式变量,并输出到目标位置。

  1. const less = require('less');
  2. const LessPluginCleanCSS = require('less-plugin-clean-css');
  3. const fs = require('fs');
  4. const darkThemeVars = require('ng-zorro-antd/dark-theme');
  5. const appStyles = 'path/src/styles.less'; // 应用的样式入口文件
  6. const themeContent = `@import '${appStyles}';`;
  7. less.render(themeContent, {
  8. javascriptEnabled: true,
  9. plugins: [new LessPluginCleanCSS({ advanced: true })],
  10. modifyVars: {
  11. ...darkThemeVars
  12. }
  13. }).then(data => {
  14. fs.writeFileSync(
  15. // 主题样式的输出文件
  16. 'path/assets/themes/style.dark.css',
  17. data.css
  18. )
  19. }).catch(e => {
  20. // 记录渲染错误
  21. console.error(e);
  22. });
  1. 运行时切换样式

动态创建 link 标签,将样式文件动态加载在应用中,反之移除。

  1. changeTheme(theme: 'default' | 'dark'): void {
  2. if (theme === 'dark') {
  3. const style = document.createElement('link');
  4. style.type = 'text/css';
  5. style.rel = 'stylesheet';
  6. style.id = 'dark-theme';
  7. style.href = 'assets/themes/style.dark.css';
  8. } else {
  9. const dom = document.getElementById('dark-theme');
  10. if (dom) {
  11. dom.remove();
  12. }
  13. }
  14. }