This is a migrated thread and some comments may be shown as answers.

Switch between light and dark theme on the fly

1 Answer 621 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Alomgir
Top achievements
Rank 1
Alomgir asked on 25 Jun 2020, 04:28 PM

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);
  }
}

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 29 Jun 2020, 02:41 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
General Discussions
Asked by
Alomgir
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Share this question
or