Ionic change Status Bar color

Hi There, After long time just decided to share some experience, I was struggling to change the status bar color of mobile device in Ionic, I tried few stories but finally the simplest and easiest way is below.

by referring to this documentation: https://ionicframework.com/docs/native/status-bar/ you can find more the Native Status Bar plugin, which you need to install it. It supports android, IOS, Android & Windows Device.
before we start, I’m using ionic version 2, which is utilizing angular 5 with typescript.
1- install it based on documentation or like below.

2- then do the Import into your main component.

3- set the color, like below

over, just as it is simple, this plugin has other function to take control of status bar overlay and the text color for different king of background color like light or dark, or you can hide the overlay, refer to it’s documentation to know more about the function.
i’ll just show you another example from my own source codes.

and also you can do it config.xml as well. just add below lines.

here we go.

Leave A Comment?