Reputation: 551
There appears to be a multiple of threads discussing this but not with any real solution. I was hoping it would be something straightforward. Basically, all I want to do is change the status bar text color as my header/navbar/status bar is a dark blue. The default text color is black and I just want to change it to white, it is that simple.
Where do I make these changes? I have already installed the status bar plugin and my config file is below (this is without any changes suggested in some threads).
<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="16" />
<preference name="BackupWebStorage" value="none" />
<preference name="StatusBarStyle" value="default" />
<preference name="SplashScreen" value="screen" />
<preference name="orientation" value="portrait" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
<preference name="SplashScreenDelay" value="3000" />
How can I solve this?
Upvotes: 3
Views: 10467
Reputation: 37
To change the status bar style please refer ionic doc https://ionicframework.com/docs/v3/native/status-bar/
this.platform.ready().then(() => {
this.splashScreen.hide();
this.statusBar.overlaysWebView(true);
this.statusBar.styleDefault();
});
Upvotes: -1
Reputation: 898
For black text with white background you can use below code.
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.backgroundColorByName('white');
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
For white text with black background you can try following code.
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.backgroundColorByName('black');
this.statusBar.styleLightContent()
this.splashScreen.hide();
});
}
Upvotes: 5
Reputation: 1210
In app.js
file, apply this:
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
// StatusBar.styleDefault();
StatusBar.style(1)
}
});
})
Other options are:
StatusBar.style(1)
// LightStatusBar.style(2)
// Black, translucentStatusBar.style(3)
// Black, opaqueStatusbar.styleColor
('black')Statusbar.styleHex('#FF0000')
// RedUpvotes: 0
Reputation: 2232
It depends on the status bar background, if you are using a dark background you could do this:
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.styleLightContent();
});
I have this on the constructor of my app.component.ts
To test more options you can check the doc here
Upvotes: 7