Switch between light and dark theme on the fly

[Alomgir]

I have created a light and dark theme from the kendo theme builder tool. I would like to switch the themes on the fly in my angular app. I managed to do that, however, the charts dont seem to like the new theme. Other controls seem to work fine.  I am switching href of the link tag on the fly. Below is a snippet of the code I used.

 

@Component({
  selector: 'css-loader',
  template: `<link rel="stylesheet" type="text/css" [href]="path" />`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CssLoaderComponent {
  public theme: string = environment.theme;
  cssPath: any;
  constructor(
    public sanitizer: DomSanitizer,
    private themeService: SidenavService,
    private cd: ChangeDetectorRef,
    private router: Router
  ) {

    this.themeService.toggleState$.subscribe((val) => {
      this.theme = this.theme === 'light-theme' ? 'dark-theme' : 'light-theme';
      this.cssPath = `assets/themes/${this.theme}/${this.theme}.css`;
      this.cd.markForCheck();
    });
  }
  set path(path) {
    this.cssPath = path;
  }
  get path() {
    return this.sanitizer.bypassSecurityTrustResourceUrl(this.cssPath);
  }
}

[Dimiter Topalov]

Hello Alomgir,

Indeed, the Chart component needs to be destroyed and recreated after the stylesheet is substituted with the new one. This approach is not officially supported, but using the load event seems to be working as expected in FireFox (while not so in Chrome). A certain timeout or other event handler ensuring that the new CSS is loaded before recreating the Chart should do the trick, e.g.:

https://stackblitz.com/edit/angular-c9fzvr-obwobr?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik