如何实现ng-zorro组件的Darkmode与Lightmode切换？求专业方案

方案一：基于CSS变量的即时切换（推荐） #

这种方式通过将ng-zorro的Less变量映射为全局CSS变量，通过切换body类名实现主题即时切换，无需重新加载样式文件。

1. 定义全局CSS变量与主题类
   在项目的全局样式文件（如styles.less）中，为亮色和暗色主题定义对应的CSS变量：

// 亮色主题变量（默认）
:root {
  --primary-color: #1890ff;
  --body-background: #ffffff;
  --text-color: #262626;
  --border-color-base: #d9d9d9;
  --component-background: #ffffff;
  // 可根据需求添加更多ng-zorro核心变量，参考官方默认主题变量列表
}

// 暗色主题变量
body.dark-theme {
  --primary-color: #177ddc;
  --body-background: #141414;
  --text-color: #e5e5e5;
  --border-color-base: #434343;
  --component-background: #1f1f1f;
}

2. 映射ng-zorro Less变量到CSS变量
   创建自定义主题文件（如custom-theme.less），将ng-zorro的核心Less变量替换为对应的CSS变量，确保覆盖默认样式：

// 覆盖ng-zorro核心变量
@primary-color: var(--primary-color);
@body-background: var(--body-background);
@text-color: var(--text-color);
@border-color-base: var(--border-color-base);
@component-background: var(--component-background);

// 引入ng-zorro基础样式（确保路径正确）
@import "~ng-zorro-antd/ng-zorro-antd.less";

3. 配置Angular加载自定义主题
   修改angular.json，将styles数组中的ng-zorro默认样式替换为自定义主题文件：

"styles": [
  "src/custom-theme.less",
  "src/styles.less"
]

4. 实现主题切换逻辑
   创建一个切换组件，通过操作DOM类名和本地存储记录用户偏好：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-theme-switcher',
  template: `
    <nz-switch 
      [(ngModel)]="isDarkTheme" 
      (ngModelChange)="onThemeChange()"
      [nzCheckedChildren]="'暗黑模式'"
      [nzUnCheckedChildren]="'亮色模式'"
    ></nz-switch>
  `
})
export class ThemeSwitcherComponent implements OnInit {
  isDarkTheme = false;

  ngOnInit(): void {
    // 读取本地存储的主题设置
    const savedTheme = localStorage.getItem('app-theme');
    this.isDarkTheme = savedTheme === 'dark';
    this.applyTheme(this.isDarkTheme);
  }

  onThemeChange(): void {
    this.applyTheme(this.isDarkTheme);
    localStorage.setItem('app-theme', this.isDarkTheme ? 'dark' : 'light');
  }

  private applyTheme(isDark: boolean): void {
    if (isDark) {
      document.body.classList.add('dark-theme');
    } else {
      document.body.classList.remove('dark-theme');
    }
  }
}

方案二：动态加载预生成主题包 #

如果需要更彻底的主题隔离，可以使用ng-zorro官方主题定制功能预生成亮色和暗色主题的CSS文件，再通过动态加载的方式切换：

1. 生成主题包
   使用ng-zorro官方主题定制工具生成亮色和暗色主题的CSS文件，保存到项目的assets/themes目录下。

2. 动态加载主题文件
   通过创建/销毁link标签来切换主题：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-theme-switcher',
  template: `<button (click)="switchTheme()">切换主题</button>`
})
export class ThemeSwitcherComponent implements OnInit {
  private currentThemeLink?: HTMLLinkElement;
  private currentTheme = 'light';

  ngOnInit(): void {
    this.currentTheme = localStorage.getItem('app-theme') || 'light';
    this.loadTheme(this.currentTheme);
  }

  switchTheme(): void {
    this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
    this.loadTheme(this.currentTheme);
    localStorage.setItem('app-theme', this.currentTheme);
  }

  private loadTheme(theme: string): void {
    // 移除当前主题链接
    if (this.currentThemeLink) {
      document.head.removeChild(this.currentThemeLink);
    }
    // 创建新的主题链接
    this.currentThemeLink = document.createElement('link');
    this.currentThemeLink.rel = 'stylesheet';
    this.currentThemeLink.href = `assets/themes/${theme}.css`;
    document.head.appendChild(this.currentThemeLink);
  }
}

注意事项 #

• 方案一的CSS变量方式切换无延迟，体验更流畅，适合大多数场景；
• 若需要覆盖特定组件的样式，可基于主题类名编写针对性样式（如.dark-theme .nz-modal-content { ... }）；
• 可通过监听系统主题偏好（window.matchMedia('(prefers-color-scheme: dark)')）实现自动适配系统主题。

内容的提问来源于stack exchange，提问作者ChichiKugel