How to change theme or header or status bar color in cordova?

Amitpal Singh

July 25, 2022

Add the following plugin:

cordova plugin add cordova-plugin-statusbar

It is also possible to install via repo url directly ( unstable )

cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

config.xml

StatusBarOverlaysWebView (boolean, defaults to true). Make the statusbar overlay or not overlay the WebView at startup.

 <preference name="StatusBarOverlaysWebView" value="true" />

Only supported on Android 5 or later. Earlier versions will ignore this preference.

StatusBarBackgroundColor (color hex string, no default value). Set the background color of the statusbar by a hex string (#RRGGBB) at startup. If this value is not set, the background color will be transparent. If StatusBarOverlaysWebView is set to true, then a 8 digit hex (#AARRGGBB) string can optionally be used to define the transparency.

<preference name="StatusBarBackgroundColor" value="#3367D6" />

Share this post:

I would like to introduce myself as freelancer professional with unique 10+ years of rich experience in building a brand with “Result Oriented procedure” Keeping Quality on priority and On Time Delivery.

Account

Site

Support

How to change theme or header or status bar color in cordova?

config.xml

How to Attribute?

Your action, our appreciation