如何在Ant Design Angular中通过按钮切换NG-ZORRO主题？

问题描述 #

我有一个theme.less文件，里面包含深色和浅色主题的注释状态@import代码行。单独取消对应代码行的注释后，两种主题都能正常应用。但我想通过按钮操作实现主题切换，尝试把@import语句包裹在CSS类中，通过切换类来实现，却没有生效。

原theme.less内容 #

//default theme
//@import "../node_modules/ng-zorro-antd/ng-zorro-antd.css";

//dark theme
@import "../node_modules/ng-zorro-antd/ng-zorro-antd.dark.css";

尝试过的无效代码 #

//default theme
//@import "../node_modules/ng-zorro-antd/ng-zorro-antd.css";

//dark theme
//@import "../node_modules/ng-zorro-antd/ng-zorro-antd.dark.css";


.default-theme {
  @import "../node_modules/ng-zorro-antd/ng-zorro-antd.css";
}

.dark-theme {
  @import "../node_modules/ng-zorro-antd/ng-zorro-antd.dark.css";
}

解决方法 #

为什么嵌套导入无效 #

Ng-Zorro的主题CSS是全局样式文件，直接嵌套在类选择器中会导致样式选择器被修改（变成.default-theme xxx），和组件原有的选择器不匹配，自然无法生效。

方案1：动态加载CSS文件（官方预设主题首选） #

通过动态创建/移除<link>标签来切换全局主题，步骤如下：

1. 编写主题切换逻辑
   在组件的TS文件中添加以下代码：

// 定义主题文件路径
const THEME_PATHS = {
  default: '../node_modules/ng-zorro-antd/ng-zorro-antd.css',
  dark: '../node_modules/ng-zorro-antd/ng-zorro-antd.dark.css'
};

// 切换主题的方法
switchTheme(theme: 'default' | 'dark') {
  // 清除已加载的主题样式
  const existingLink = document.getElementById('theme-link');
  if (existingLink) {
    existingLink.remove();
  }

  // 创建新的样式链接
  const link = document.createElement('link');
  link.id = 'theme-link';
  link.rel = 'stylesheet';
  link.href = THEME_PATHS[theme];
  document.head.appendChild(link);

  // 保存主题到本地存储，刷新页面后保持状态
  localStorage.setItem('active-theme', theme);
}

// 页面初始化时加载保存的主题
ngOnInit() {
  const savedTheme = localStorage.getItem('active-theme') as 'default' | 'dark' || 'default';
  this.switchTheme(savedTheme);
}

2. 添加切换按钮
   在组件模板中添加触发按钮：

<button (click)="switchTheme('default')">浅色主题</button>
<button (click)="switchTheme('dark')">深色主题</button>

方案2：Less变量覆盖+类切换（自定义主题首选） #

如果需要自定义主题样式，而非直接用官方预设，可以通过Less变量嵌套覆盖实现：

1. 修改theme.less

// 浅色主题变量覆盖
.default-theme {
  @import "../node_modules/ng-zorro-antd/style/entry.less";
  @primary-color: #1890ff; // 自定义主色
  @body-background: #ffffff;
  // 其他需要覆盖的变量可参考Ng-Zorro官方文档
}

// 深色主题变量覆盖
.dark-theme {
  @import "../node_modules/ng-zorro-antd/style/entry.less";
  @primary-color: #177ddc;
  @body-background: #141414;
  @text-color: #e6e6e6;
  // 其他深色主题变量
}

2. 根组件切换类
   在根组件的模板根元素上绑定主题类：

<div [class.default-theme]="currentTheme === 'default'" [class.dark-theme]="currentTheme === 'dark'">
  <!-- 页面所有内容都放在这个容器内 -->
  <button (click)="currentTheme = 'default'">浅色主题</button>
  <button (click)="currentTheme = 'dark'">深色主题</button>
</div>

3. 组件TS管理状态

currentTheme: 'default' | 'dark' = 'default';

ngOnInit() {
  const saved = localStorage.getItem('custom-theme');
  if (saved) this.currentTheme = saved as any;
}

// 切换时保存状态
changeTheme(theme: 'default' | 'dark') {
  this.currentTheme = theme;
  localStorage.setItem('custom-theme', theme);
}

注意：此方案需要确保项目是通过Less编译Ng-Zorro样式，而非直接导入CSS文件。

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