# I am not able to change Status Bar color

**URL:** <https://forum.ionicframework.com/t/i-am-not-able-to-change-status-bar-color/120335>\
**Category:** Ionic Native\
**Created:** [February 3, 2018, 1:17am UTC](https://forum.ionicframework.com/t/i-am-not-able-to-change-status-bar-color/120335 "2018-02-03T01:17:09Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![codingBeast](https://avatars.discourse-cdn.com/v4/letter/c/258eb7/32.png) [@codingBeast](https://forum.ionicframework.com/u/codingBeast)\
**Post date:** [February 3, 2018, 1:17am UTC](https://forum.ionicframework.com/t/i-am-not-able-to-change-status-bar-color/120335/1 "2018-02-03T01:17:09Z")

</div>

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![rtalexk](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rtalexk/32/108700_2.png) [@rtalexk](https://forum.ionicframework.com/u/rtalexk)\
**Post date:** [February 3, 2018, 1:44am UTC](https://forum.ionicframework.com/t/i-am-not-able-to-change-status-bar-color/120335/2 "2018-02-03T01:44:53Z")

</div>

You have to install [Header Color Cordova Plugin](https://ionicframework.com/docs/native/header-color/) 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');`

---

<div class="post-metadata">

**Author:** ![codingBeast](https://avatars.discourse-cdn.com/v4/letter/c/258eb7/32.png) [@codingBeast](https://forum.ionicframework.com/u/codingBeast)\
**Post date:** [February 3, 2018, 2:55am UTC](https://forum.ionicframework.com/t/i-am-not-able-to-change-status-bar-color/120335/3 "2018-02-03T02:55:26Z")

</div>

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

```auto
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?

---

<div class="post-metadata">

**Author:** ![rtalexk](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rtalexk/32/108700_2.png) [@rtalexk](https://forum.ionicframework.com/u/rtalexk)\
**Post date:** [February 3, 2018, 3:46am UTC](https://forum.ionicframework.com/t/i-am-not-able-to-change-status-bar-color/120335/4 "2018-02-03T03:46:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![codingBeast](https://avatars.discourse-cdn.com/v4/letter/c/258eb7/32.png) [@codingBeast](https://forum.ionicframework.com/u/codingBeast)\
**Post date:** [February 5, 2018, 5:40pm UTC](https://forum.ionicframework.com/t/i-am-not-able-to-change-status-bar-color/120335/5 "2018-02-05T17:40:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vasanthb](https://avatars.discourse-cdn.com/v4/letter/v/4da419/32.png) [@vasanthb](https://forum.ionicframework.com/u/vasanthb)\
**Post date:** [July 9, 2019, 8:29am UTC](https://forum.ionicframework.com/t/i-am-not-able-to-change-status-bar-color/120335/6 "2019-07-09T08:29:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![alaswer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/alaswer/32/130298_2.png) [@alaswer](https://forum.ionicframework.com/u/alaswer)\
**Post date:** [January 1, 2020, 8:26am UTC](https://forum.ionicframework.com/t/i-am-not-able-to-change-status-bar-color/120335/7 "2020-01-01T08:26:12Z")

</div>

headerColor is not for the status bar, it is for app header in the recents view when user press recents key to view/switch apps.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:51pm UTC](https://forum.ionicframework.com/t/i-am-not-able-to-change-status-bar-color/120335/8 "2021-07-19T21:51:53Z")

</div>

Closed on July 19, 2021, 9:51pm UTC