Unreadable Status Bar in Light Mode

[kwmc-lucas]

The time, battery indicator etc. are White, regardless of whether the device is in Light or Dark Mode.

The text (and icons) should be Black when in Light Mode, and White when in Dark Mode.

[aeharding]

This is tricky. We can force it to be white, but then it won't be translucent which means that dialogs open won't look right.

This is an unfortunate limitation of iOS PWAs. I think there's a way to get around it by dynamically switch header modes, but this isn't a super quick fix.

https://social.harding.dev/@alex/110590855343602954

[valentind44]

Indeed there is no way to have translucent statusbar with black text 😞

But solid statusbar

<meta
      name="apple-mobile-web-app-status-bar-style"
      content="default"
    />

is still better than having white text on white background when using light mode.

I've used the "Run JavaScript on Webpage" Shortcus action to execute the following code inside wefwef.app:

document.querySelector("meta[name=apple-mobile-web-app-status-bar-style]").setAttribute("content", "default")
completion(true)

then installed it to my home screen, until we have a better solution (if that can help anyone in the same case)

[aeharding]

Yeah, the problem is it looks bad with dialogs and also makes the available vertical space of dialogs less.

[kwmc-lucas]

@aeharding can you honestly say that the way it looks now - constantly having the core UI of the device unreadable - is worse than a solid status bar when showing dialogs?

[aeharding]

It's not just a solid status bar. Dialogs get shifted down from ionic, providing less vertical space for writing comments and logging in. That's the concern with @valentind44's approach.

Please, reach out to Apple about this.

[kwmc-lucas]

@aeharding thanks Alex, I think you saw my Mastadon post, so hopefully that helps!

Is this definitely an Apple issue, and not Ionic?

[aeharding]

Yes, it's 100% an apple issue. I am closing since it is resolved with the native app that has the ability to control status bar style. :)

Once Apple fixes their broken PWA support this can be reopened.