How to set the color font on status bar dynamically change based on the background?

So i'm developing a mobile app and want to set the status bar content (texts, icons, etc.) color to change depending on the header background color. For example, if the header background color appeared with light color, the content in the status bar change to dark color (black), and vice versa. Am i able to do that?

I already did this:

i have used the extensibility configurations for StatusBarOverlayView value. the problem just like the picture number two that i sent above. thanks

Solution

Hi,

You can use Cordova StatusBar plugin https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-statusbar/, but it seems like there is an issue in iOS13 in dark mode (https://github.com/apache/cordova-plugin-statusbar/issues/148).

Below code worked for in light mode in iOS13

if(window.StatusBar) {
    if($parameters.Style === 1) {
        // Change Status Bar background bar to white
        window.StatusBar.backgroundColorByName("white");
        // Change Status Bar text color to black
        window.StatusBar.styleDefault();
    } else {
        // Change Status Bar background bar to black
        window.StatusBar.backgroundColorByName("black");
        // Change Status Bar text color to white
        window.StatusBar.styleLightContent();
    }
} else {
    alert("not present");
}

Regards.

Solution

Prasad Rao wrote:

Hi,

You can use Cordova StatusBar plugin https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-statusbar/, but it seems like there is an issue in iOS13 in dark mode (https://github.com/apache/cordova-plugin-statusbar/issues/148).

Below code worked for in light mode in iOS13

if(window.StatusBar) {
    if($parameters.Style === 1) {
        // Change Status Bar background bar to white
        window.StatusBar.backgroundColorByName("white");
        // Change Status Bar text color to black
        window.StatusBar.styleDefault();
    } else {
        // Change Status Bar background bar to black
        window.StatusBar.backgroundColorByName("black");
        // Change Status Bar text color to white
        window.StatusBar.styleLightContent();
    }
} else {
    alert("not present");
}

Regards.


where do I put these codes? in the extensibility configurations or somewhere else?

Hi,

I added them in client action on button click. My assumption is you can add them in onInitialize action.

Regards.

Prasad Rao wrote:

Hi,

I added them in client action on button click. My assumption is you can add them in onInitialize action.

Regards.


so i have to put these codes in every screen initialize with JS snippet? okay i will try

do i still need to re-generate the native format (.apk & .ipa) in order to get this thing work?

Hi,

You don't need to regenerate app. It worked for me as is.

Regards.

Prasad Rao wrote:

Hi,

You don't need to regenerate app. It worked for me as is.

Regards.


update; all of your suggests worked. thank you very much for all of your answers and responses :).