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

Question

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

最后，我找到了一种方法来做到这一点。

Answer 1

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

1. 首先需要less-plugin-clean-css通过命令安装dev依赖npm i less -D less-plugin-clean-css -D

2. themes在assets文件夹中创建文件夹

3. 定义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);
});

这是完整变量减去变量的链接

4. node ./less-compiler.js在终端中运行（此命令应在文件夹中生成dark.css和文件）compact.csssrc/assets/themes

5. （可选）如果您希望node ./less-compiler.js每次构建项目时都运行，可以将其替换"build": "ng build",为"build": "ng build && node ./less-compiler.js",inpackage.json和 after you can build your project by npm run buildcommand。

6. 添加<link rel="stylesheet" id="theme-link" href="/assets/themes/compact.css">到head您的index.html文件的。

7. 定义一个函数，帮助您删除主题的链接或将主题的链接添加到头部。（在我的例子中是文件中定义的函数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';
    }
  }
}

我希望这可以帮助您轻松组织运行时主题切换。

这也是简单项目存储库的链接

GitHub 存储库