PWA Status Bar Background and Text Color on IOS 13 Dark Mode

I’m experiencing some trouble with my PWAs status bar color after Apple introduced the dark mode on the new IOS 13.

I used to set the “apple-mobile-web-app-status-bar-style” to “black-translucent” for a transparent background with white text on the status bar. Now, depending on the user system theme (light or dark), the text color changes from white to black and vice-versa. Because my layout uses a dark background the result is now black text over an “almost black” background.

Any workaround for this?

black-translucent – shows white text – ios12 black-translucent – shows black text – ios13

Answer

black-translucent seems to be a depreciated value of this meta tag. According to the user “furvy” at a discussion on apple.com: https://forums.developer.apple.com/thread/89471. He said:

Today I noticed this in the Safari remote debugger when looking at one of my Web Apps… ‘”black-translucent” is a deprecated apple-mobile-web-app-status-bar-style value. Support for this value will be removed in a future release.’ […]

It’s so annoying also for my PWA, may be that it still worked due to a bug in iOS 12, but in iOS 13 they completely removed it.

Leave a Reply