Dynamic Theme (Experimental)

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

Caveats#

  • This function depends on CSS Variables. Please check the browser compatibility.
  • This function requires at least ng-zorro-antd@13.2.x.

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, NZ_CONFIG } from 'ng-zorro-antd/core/config';

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

@NgModule({
  declarations: [AppComponent],
  imports: [
    CommonModule
  ],
  providers: [
    { provide: NZ_CONFIG, useValue:  ngZorroConfig  }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

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 {
  constructor(private nzConfigService: 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.