CODEWITHSUNDEEP
androidiosangularjsionic-frameworkionic2
bluewavestudio
bluewavestudio

Reputation: 551

Trying to change the Ionic app statusbar text color

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

Answers (4)

Shashank Singh
Shashank Singh

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

RoboMex
RoboMex

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

Check the output in this link

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

Check code output here

Upvotes: 5

Jonathan Brizio
Jonathan Brizio

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) // Light
  • StatusBar.style(2) // Black, translucent
  • StatusBar.style(3) // Black, opaque
  • Statusbar.styleColor('black')
  • Statusbar.styleHex('#FF0000') // Red

Upvotes: 0

Jean Guzman
Jean Guzman

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

Related Questions