如何在运行时更改 ng-zorro 主题

Question

我做了很多研究，但找不到生成 ng-zorro 主题并在运行时更改它的方法。

终于，我找到了一个方法来做到这一点。

Answer 1

演示： https://ashotaleqs.github.io/ng-zorro-switch-theme/

首先需要通过命令安装less-plugin-clean-css开发依赖npm i less -D less-plugin-clean-css -D
在 assets 文件夹中创建 themes 文件夹
定义less-compiler.js 其中包含：

const less = require('less');
const LessPluginCleanCSS = require('less-plugin-clean-css');
const fs = require('fs');

// ng zorro defined styles
const basicStyles = `@import './node_modules/ng-zorro-antd/ng-zorro-antd.less';`;
// ng zorro compact theme variables
const compactThemeVars = require('ng-zorro-antd/compact-theme');
// ng zorro dark theme variables
const darkThemeVars = require('ng-zorro-antd/dark-theme');

less.render(`${basicStyles}`, {
  javascriptEnabled: true,
  plugins: [new LessPluginCleanCSS({ advanced: true })],
  modifyVars: {

    ...compactThemeVars,
    ...{
      // for the compact theme
      // you need to add your color variables here
      // you can find the full variables list here
      // https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/scripts/site/_site/doc/theme.less
      'primary-color': '#111521',
      'error-color': 'green'
    }
  }
}).then(data => {
  fs.writeFileSync(
    // output path for the theme style
    './src/assets/themes/compact.css',
    data.css
  )
}).catch(e => {
  // log the render error
  console.error(e);
});

less.render(`${basicStyles}`, {
  javascriptEnabled: true,
  plugins: [new LessPluginCleanCSS({ advanced: true })],
  modifyVars: {
    ...darkThemeVars,
    ...{
      // for the dark theme
      // you need to add your color variables here
      // you can find the full variables list here
      // https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/scripts/site/_site/doc/theme.less
      'primary-color': '#02cadb',
      'error-color': 'yellow'
    }
  }
}).then(data => {
  fs.writeFileSync(
    // output path for the theme style
    './src/assets/themes/dark.css',
    data.css
  )
}).catch(e => {
  // log the render error
  console.error(e);
});

这里是完整变量的linkless variables

运行 node ./less-compiler.js 在终端中（此命令应在 src/assets/themes 文件夹中生成 dark.css 和 compact.css 文件）
(optional)如果你想每次在构建工程的时候运行node ./less-compiler.js，你可以将 package.json 中的 "build": "ng build", 替换为 "build": "ng build && node ./less-compiler.js",，然后您可以通过 npm run build 命令构建项目。
将 <link rel="stylesheet" id="theme-link" href="/assets/themes/compact.css"> 添加到 index.html 文件的 head 中。
定义一个函数，帮助您删除或添加主题的 link 到头部。（在我的例子中，app.component.ts 文件中定义的函数）

// ..........................
export class AppComponent {
  theme = '';
  constructor() {
      setInterval(() => {
         this.changeTheme()
      }, 2000);
  }

  changeTheme() {
    this.theme = this.theme === 'dark' ? '' : 'dark';
    const style = document.getElementById('theme-link') as HTMLLinkElement;
    if (this.theme === 'dark') {
      style.href = '/assets/themes/dark.css';
    } else {
      style.href = '/assets/themes/compact.css';
    }
  }
}

希望可以帮助大家轻松组织运行时间主题切换

这里还有简单项目库link

GitHub Repository

Answer 2

更简单的方法可能是创建两个主题文件，例如theme-default.less 和 theme-dark.less。默认主题导入默认 ng-zorro 样式，深色主题导入深色 ng-zorro 样式。将它们都包含在 angular.json 的资产部分中。您只需要将深色样式的范围限定在某些 class 或某些内容下，以便有条件地应用它们。像这样：

theme-default.less:

@import '~ng-zorro-antd/ng-zorro-antd.dark.less';
// default vars
@primary-color: #3f87f5;

theme-dark.less:

body.dark {
  @import '~ng-zorro-antd/ng-zorro-antd.dark.less';
  // dark vars
  @primary-color: #3f87f5;
}

现在您只需将 .dark class 应用到 body 即可将主题更改为深色。

如何在运行时更改 ng-zorro 主题

How to change the ng-zorro theme at runtime

angular

angular9

ng-zorro-antd