Bug 217771

Summary:

Top bar colour control for homescreened site

Product:

WebKit

Reporter:

Kenneth Kufluk <kenneth>

Component:

New Bugs

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED INVALID

Severity:

Normal

CC:

bdakin, bfulgham, megan_gardner, thorton, timothy, webkit-bug-importer

Priority:

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	Details
View All Add attachment proposed patch, testcase, etc.

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

<rdar://problem/71197609>

Note You need to log in before you can comment on or make changes to this bug.