I have a PWA I’m working on using the ionic framework.
It looks just like an iOS app apart from one thing that I can’t figure out and that’s the status bar.
On the ionic component documentation the examples show the background of the header matching that of the status bar, which is exactly what I’m trying to achieve but for me the status bar is always solid black (in light mode) and white in dark mode.
I have tried to implement the collapsable headers, which gives a nice translucent background effect but I cannot get the status bar to match.
I have tried to add extra meta tags like
<meta name="viewport" content="viewport-fit=cover"></meta>
or
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
Which have not made any difference, but given that my manifest file has display set to standalone, they shouldn’t be needed.
I have been able to change the color using the theme_color property in the manifest but that is a set color and will not match the translucent behavior of the header.
Any guidance or other things to try would be greatly appreciated