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

Question

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

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

Answer 1

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

1. 首先你需要安装less-plugin-clean-css命令的开发依赖 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);
});

这里是完整变量的链接 less variables

1. 运行 node ./less-compiler.js在终端中(此命令应在 dark.css 文件夹中生成 compact.css 和 src/assets/themes 文件)

2. (可选) 如果你想运行 node ./less-compiler.js每次构建项目时，您都可以替换 "build": "ng build",与 "build": "ng build && node ./less-compiler.js",在package.json然后你可以通过 npm run build 构建你的项目命令。

3. 添加 <link rel="stylesheet" id="theme-link" href="/assets/themes/compact.css">进入head你的index.html文件。

4. 定义一个函数，帮助您删除主题链接或将主题链接添加到标题中。 (在我的例子中，函数定义在 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 Repository