781
Views
7
Comments
Solved
How to set the color font on status bar dynamically change based on the background?
Question

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

UserImage.jpg
Prasad Rao
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.

UserImage.jpg
Aditya EP

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?

UserImage.jpg
Prasad Rao

Hi,

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

Regards.

UserImage.jpg
Aditya EP

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?

UserImage.jpg
Prasad Rao

Hi,

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

Regards.

UserImage.jpg
Aditya EP

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 :).

2018-12-09 19-13-19
Tiago Gomes

Did anyone solved the Dark Mode issue when you have white background colours? Thank you.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.