How to set top Status Bar color in ionic 3
overlaysWebView(doesOverlay)
Set whether the status bar overlays the main app view. The default is true.
Get a Full Code
Page : app.component.ts
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = HomePage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
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.
//this is by default
//statusBar.styleDefault();
//set top status bar overlay
statusBar.overlaysWebView(true);
// set status bar to red
statusBar.backgroundColorByHexString('#f00');
splashScreen.hide();
});
}
}