Ionic dynamic CSS on ion-nav

Ionic Framework ionic-v3
1

I have 4 themes, which will be dynamically change whenever view appears. So I have subscribed for viewWillAppear in app.component.ts and done the logic.

But I can see a flickering effect in between the style changes. Below is my code.

app.html

<ion-nav [ngClass]='selectedStyle' [root]="rootPage"></ion-nav>

app.component.ts


 constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private app: App) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();


    app.viewDidEnter.subscribe((e) => {
      this.pageCount += 1;
      this.pageCount = this.pageCount > 4 ? 1 : this.pageCount;
      this.updateCSSStyle();
    });
  }

  updateCSSStyle(){
    switch(this.pageCount){
      case 0:{
        this.selectedStyle = 'login-theme';
        break;
      }
      case 1:{
        this.selectedStyle = 'yellow-theme';
        break;
      }
      case 2:{
        this.selectedStyle = 'blue-theme';
         break;
      }
      case 3:{
        this.selectedStyle = 'pink-theme';
         break;
      }
      case 4:{
        this.selectedStyle = 'green-theme';
         break;
      }
    }
  }