Solution 1 :

According to this post: you are on the right track.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

What `black-translucent” does, and I quote:

The black-translucent setting has white text and symbols. It will take the same background color as the body tag of your web app.

So, you have to do:

body {
  background-color: #00623A;

I tested it on a normal browser web app and it works… but not quite as you would expect. My theme color is indigo, and the bar shows the same color but lighter. But at least is changed from plain white to a blueish one.

Problem :

I’ve been trying to set the background color of the status bars in a website. Works fine on Android by doing this:

<meta name="theme-color" content="#00623A" />

I thought the following would work on iPhones because the background color of the page is the same:

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Unfortunately it still shows a lighter version of the background color with black icons.

Looking into this I can only see mention of this working when the PWA is actually added to home screen and running in full screen mode. Is this right? If so, is there a way to change the status bar background color when running as a normal website?


Comment posted by Chris Love

I hate to ask, but can you send a screenshot? Different iPhones can behave differently. The newer models have the notch for example. Transparent should let your site show behind the status bar. It does on my iPhone with the notch.