apple-mobile-web-app-status-bar-style in ios 10

Question

I know this question has been asked previously, just want to know if this is still the case in ios 10 (and ios 9)...

According to the apple developer guidelines for web apps (found here), there are 3 choices for the status bar in a web app; default, black and black-translucent.

1. Default results in a white status bar with black text,
2. Black results in a black status bar with white text, and
3. Black-translucent results in a transparent background with white text. Additionally, this status bar floats above your content, meaning you have to push your content down 20px in order to not have the content overlap with thte status bar text.

I'd really like to use the black-translucent status bar (as I think it looks more native), but the background of my page is a light grey. This makes the white text on this status bar very hard to read.

Put simply, I'd just like a transparent background with black text (essentially, default-translucent). Is this possible?

Anorthite

Answer 1

Unfortunately, No you cannot have black text on a transparent background.

I'm of the opinion that this will be added to the schema at some point and also find it a pain that you can't achieve this example right now. I guess in short the answer is design your faux app natively to achieve greater control of its behaviour and appearance.

Apple Documentation Supported Meta Tags

---

content="default"

---

content="black"

---

content="black-translucent"

Koontz

Thanks for the answer @Matt, seems like a glaring oversight on Apple's part but I guess I'll just have to wait! – Anorthite

You're welcome @Anorthite :-) I completely agree, i'm developing an admin/dashboard that works well as a web app and wish there was slightly more control / options available! – Koontz

I have these two meta tags added but the statusbar black text gets hidden due to my application's black navigation bar. <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> What should I do to get the status bar text in white color? – Tahoe

I am not able to change Status bar color on iOS 10. is there any other meta tag I need to use? other than described in this link – Vendue

developer.apple.com/library/content/documentation/… – Vendue

Answer 2

I found the solution! We can achieve that with theme-color meta tag.

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

Liftoff

Wow, this one indeed works in 2022 – Cardie

Can you show your full code or a test page? I'm trying to have a transparent status bar with black text in light mode, and a transparent status bar with white text in dark mode, and I still get white text on light mode. – Ousel

In 2022 this should be the accepted answer 🎉 – Laryngitis

@LennartSchoors - Remove the other meta-tag "apple-mobile-web-app-status-bar-style". Seems like it overrides "theme-color". – Kally

Also be aware, that you have to set panels to be in "compact mode" in your Safari configuration. Otherwise theme-color doesn't apply at all – neither on desktop, nor on mobile. – Tother

What solution is this? This meta tag doesn't allow yo to set a translucent background with black text as the OP was asking, only to set to background color. – Solvolysis

@Solvolysis if you use "black-translucent" in conjunction with the white theme color, it forces the text to be black while transparent. – Cladoceran

This is NOT a solution because it's NOT transparent like OP requested. – Winnebago

@SammyGuergachi that does not work. – Winnebago

@Winnebago yeah it doesnt with newest version of iOS, hopefully future iOS versions add this back – Cladoceran

Answer 3

It currently isn't possible. I just wanted to add (after reading a comment) that in order for the changes to show up, at least on my iphone X, you will need to delete the app from your phone then re-add it to the home screen.

Firstborn

Damnit - took me 2 days to just reinstall it - just to have the translucent style show up - no dynamic update / on page load to set the style. – Fungoid

oh my god it should be tricky for everyone to got it – Motorist