I am not able to change Status Bar color

Hi, I am know to Ionic and I am trying to add a color to the status bar. I already downloaded cordova’s plugin and the status bar package from npm. I checked config.xml and the plugin is there. I already changed the overlayWebView to true and to false to see what happened and tried to change the color of the status bar. But nothing has worked. Here’s my code:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';


@IonicPage()
@Component({
  selector: 'page-welcome',
  templateUrl: 'welcome.html',
})
export class WelcomePage {


  constructor(public navCtrl: NavController, public navParams: NavParams, public statBar: StatusBar, public platform: Platform) {
    this.platform= platform;
    this.platform.ready().then( () => {
      this.statBar.overlaysWebView(true);
      this.statBar.backgroundColorByHexString('#ffffff');
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad WelcomePage');
    
  }

  



}

I would be very grateful if anyone could tell me why this is not working. Thanks in advance.

You have to install Header Color Cordova Plugin to change the status bar color.

Once you have it installed add as provider in app.module and in app.component just add headerColor.tint('#f0f0f0');

I already did that but things are the same. In the Chrome console I get:

Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

I think this is the cause of my problem. Do you know how to fix this?

That’s because you’re running on Chrome. HeaderColor is a native plugin, you have to run on either a physical device or an emulator.

1 Like

Thank you very much! I will run my app on an Android emulator.

I installed it but still no change, status bar is of black color. Should I need to uninstall cordova-statusbar plugin ?