iPhone Install Dark Mode shows white header

[DK-S]

When installed on home page for IOS the page appears fine when not in dark mode but is white when in dark mode. This appears to be opposite of the desired behavior. Should not have to turn off dark mode so that the app works like it is in dark mode.

[artyom-beilis]

I assume it is because the app is designed to work in dark mode. So if iOS inverts colors what can I do...

Show please screenshot

[DK-S]

I would guess there is not much you can do but add a note in the helps page for IOS users to let them know that the installed app may have to have dark mode turned off for it to go full black. This seems to be a limitation of Apple and not your app as it does go dark after disabling the dark mode on the phone. For users like me, that use dark mode exclusively, it will be a fun trip when I turn it off for use at night. But I guess that is the breaks.Thank you for this wonderful project and I look forward to using it with my children as we explore our night sky.Sent from my iPhoneOn Apr 23, 2024, at 12:53 AM, Artyom Beilis ***@***.***> wrote: I assume it is because the app is designed to work in dark mode. So if iOS inverts colors what can I do... Show please screenshot —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[stepjanssen]

I also noticed this when testing AstroHopper as a PWA on iOS. Did some research and it seems like it can be fixed with a Meta tag:

https://medium.com/appscope/changing-the-ios-status-bar-of-your-progressive-web-app-9fc8fbe8e6ab

The most straightforward fix should be adding:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

I tried to test this by debugging through Safari, but apparently this only takes effect when reinstalling a web app and that causes my local changes to disappear.