iOS Safari Status bar theme color without PWA

Question

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?

Answer 1

According to this post: https://codeburst.io/progressive-web-apps-customize-status-bar-23c4b2de590f 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.