Dynamic Theme (Experimental)

Except less customize theme, We also provide CSS Variable version to enable dynamic theme.

This feature depends on CSS Variables. Please check the browser compatibility.

How to use#

Import antd.variable.min.css#

Replace your import style file with CSS Variable version:

- @import "~ng-zorro-antd/ng-zorro-antd.min.css";
+ @import "~ng-zorro-antd/ng-zorro-antd.variable.min.css";

Note: You need remove babel-plugin-import for the dynamic theme.

Static config#

In order to provide default configurations in certain components, please pass an object that implements the interface NzConfig through the injection token NZ_CONFIG in the root injector. For example:

import { NzConfig, provideNzConfig } from 'ng-zorro-antd/core/config';

const ngZorroConfig: NzConfig = {
  theme: {
    primaryColor: '#1890ff'
  }
};

export const appConfig: ApplicationConfig = {
  providers: [provideNzConfig(ngZorroConfig)]
};

These global configurations would be injected and stored in a service named NzConfigService.

Dynamically Change Configurations#

You can alter the global configuration of CSS Variable through the set method of NzConfigService. For example:

import { NzConfigService } from 'ng-zorro-antd/core/config';

@Component({
  selector: 'app-change-zorro-config'
})
export class ChangeZorroConfigComponent {
  private nzConfigService = inject(NzConfigService);

  onChangeConfig() {
    this.nzConfigService.set('theme', { primaryColor: '#1890ff' });
  }
}

All component instances is responsive to this configuration change (as long as they are not configured independently).

Conflict resolve#

CSS Variable use --ant prefix by default. When exist multiple antd style file in your project, you can modify prefix to fix it.

Compile less#

Since prefix modified. Origin antd.variable.css should also be replaced:

lessc --js --modify-var="ant-prefix=custom" antd/dist/antd.variable.less modified.css

In order to implement CSS Variable and maintain original usage compatibility, we added @root-entry-name: xxx; entry injection to the ng-zorro-antd.xxx.less file to support less dynamic loading of the corresponding less file. Under normal circumstances, you do not need to pay attention to this change.