Solution 1 :

I could not find a solution BUT there is a logical hack to this.
It seems that if you take a scale of a color, the more dark it is chrome font will be white, the more lighter it will be black.

for example lets say you wish to have theme color of blue
if you set this “dark” blue color:

<meta name="theme-color" content="#2b6cb0">

the font color will be white

or this “light” blue

<meta name="theme-color" content="#4299e1">

the font will be black.

so to conclude, take the color you choose and change a bit to darker slightly and put it in the theme-color and see when it changes to white.
hope this helped.

Problem :

We have created a PWA of our web app and now want to set the status bar font color to white.

There is plenty of information on how to set the background color of the statusbar of a desktop PWA in Chrome e.g.:

<meta name="theme-color" content="#f44336">

This gives the PWA a red background color with black font color.
How can I set the font color to white?

Thanks in advance.


Comment posted by Chris Love

Right now I don’t think this is possible. I could see that being added to the web manifest spec in the future. #goodidea