Bug 217771

Summary: Top bar colour control for homescreened site
Product: WebKit Reporter: Kenneth Kufluk <kenneth>
Component: New BugsAssignee: Nobody <webkit-unassigned>
Status: RESOLVED INVALID    
Severity: Normal CC: bdakin, bfulgham, megan_gardner, thorton, timothy, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 14   
Hardware: iPhone / iPad   
OS: Unspecified   
Attachments:
Description Flags
Homescreened website changes theme, but top bar stays white none

Kenneth Kufluk
Reported 2020-10-15 11:26:22 PDT
Created attachment 411469 [details] Homescreened website changes theme, but top bar stays white The Twitter website allows users to control theme: light/dim/dark. Users like this control - it allows them to run Twitter at a different brightness from the OS. When the website is saved to homescreen, we'd like to be able to change the colour of the top bar of the phone, to match the site content. How can we do so?
Attachments
Homescreened website changes theme, but top bar stays white (7.39 MB, video/mp4)
2020-10-15 11:26 PDT, Kenneth Kufluk
no flags
Tim Horton
Comment 1 2020-10-15 13:26:27 PDT
I think you want <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">, no?
Tim Horton
Comment 2 2020-10-15 13:28:12 PDT
If that doesn't work, please reopen.
Kenneth Kufluk
Comment 3 2020-10-15 21:38:06 PDT
I tried it, but it didn't seem to have any effect. I connected Safari desktop devtools and tried just overriding directly with document.head.innerHTML="<meta content=\"black-translucent\" name=\"apple-mobile-web-app-status-bar-style\"/><meta name=\"apple-mobile-web-app-capable\" content=\"yes\"/>" It seemed to have no effect.
Tim Horton
Comment 4 2020-10-15 22:19:55 PDT
Works for me (on a iPhone with a notch, I wonder if it’s different on square screened phones). I’m also not 100% sure dynamic changes work, but they should. Regardless, this is a Safari behavior, not WebKit, so please file at bugreport.apple.com.
Alexey Proskuryakov
Comment 5 2020-10-16 11:06:24 PDT
> bugreport.apple.com https://feedbackassistant.apple.com is the current URL.
Radar WebKit Bug Importer
Comment 6 2020-11-09 10:09:59 PST
Note You need to log in before you can comment on or make changes to this bug.