cordova-plugin-statusbar-text

A minimal Cordova plugin that allows changing the status bar text/icon color (light or dark) on Android and iOS.

This plugin is useful with newer platform versions where status bar handling moved into the core platforms but text color control is not exposed to JavaScript.

Supported platforms:

• Android (cordova-android 13+ / tested with 15)
• iOS (cordova-ios 7+ / tested with 8)

Installation

cordova plugin add cordova-plugin-statusbar-text

or from a local folder:

cordova plugin add ../cordova-plugin-statusbar-text

API

The plugin exposes two simple functions.

cordova.plugins.statusBarText.setDark()
cordova.plugins.statusBarText.setLight()

| Method | Description | | ------------ | ------------------------------------------------------------------ | | setDark() | Sets dark text/icons in the status bar (for light backgrounds) | | setLight() | Sets light text/icons in the status bar (for dark backgrounds) |

Example

document.addEventListener("deviceready", function () {

    const darkHeader = true;

    if (darkHeader) {
        cordova.plugins.statusBarText.setLight();
    } else {
        cordova.plugins.statusBarText.setDark();
    }

});

iOS Configuration

iOS requires disabling view-controller-based status bar control.

Add the following to Info.plist if not already present:

<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

Without this setting, runtime changes to the status bar style may be ignored.

Platform Notes

Android

Uses the modern Android API:

WindowInsetsController.setSystemBarsAppearance()

Supported on Android 11+ and compatible with current Cordova Android platform implementations.

iOS

Uses:

UIStatusBarStyle.darkContent
UIStatusBarStyle.lightContent

The change is applied on the main UI thread.

License

Apache 2.0