After some more testing, I discovered that just removing the meta tag apple-mobile-web-app-status-bar-style or setting its value to default, would make it pick the right color for status bar from the meta theme-color.

The meta theme-color is not needed in body, as it works just fine in the head (I was wrong about that part). However, I was going to create a pull request for this small change and decided to look for open related issues in github, and found that the owner is aware of the problem and the possible solutions (, but he refuses to do anything about it claiming that it’s an apple bug (he’s right, but read bellow) and because the status bar would take screen space, pushing modals to be lower by the size of the status bar and because it works on native app. (https://github.com/aeharding/voyager/issues/44)

I personally don’t think it’s a big deal to give up that top space for the benefit of the users not users the native app, and I also don’t think we can expect a fix from Apple any time soon because the issue has been known for at least 8years according to this: https://developer.apple.com/forums/thread/9819