定制主题

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

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

    手动修改

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

    theme.less 样例如下

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

    Angular CLI 提供了 的 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. 在 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": {
    10. +          "replaceDuplicatePlugins": true
    11. +        }
    12.         ...
    13.       },
    14.       ...
    15.     },
    16.     "serve": {
    17. -      "builder": "@angular-devkit/build-angular:dev-server",
    18. +      "builder": "@angular-builders/custom-webpack:dev-server",
    19.        ...
    20.     }
    21.     ...
    22.   }

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

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

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

    • 🌑 暗黑主题（9+ 支持）
    • 📦 紧凑主题（9+ 支持）

    方式一

    是在样式文件全量引入 ng-zorro-antd.dark.less 或 ng-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.json 的 styles 字段中，全量引入 ng-zorro-antd.dark.css 或者 ng-zorro-antd.compact.css。

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

    angular.json 中

    方式三

    在 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')}";`,
    13.           },
    14.           javascriptEnabled: true
    15.         }
    16.       }
    17.     ]
    18.   }
    19. };

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

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