iOS 15 Safari CSS

Viewed 2222

I have the iOS 15 beta installed and looking at my website on the new Safari update, I see that the top header is showing a grey header instead of being transparent to flow under the notch etc.

The whole site is plain white and black text, so I'd like the status bar to be transparent and black text so the site blends in perfectly.

I have tried:

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

Also used:

<meta name="theme-color" content="#ffffff">

None of that seem to make a difference, I checked other websites where the header color is pretty much merging with the header, if you check:

cnn.com or hillarys.co.uk you will see that the header affects the color of the Safari's nav bar on iPad, on iPhone it will just take over the notch area so it becomes the header. For me, no matter what I do, I cannot get that white header/notch to blend in with my white site.

Hopefully it makes sense and thanks in advance.

1 Answers

If your phone is in Light Appearance mode (Settings -> Display & Brightness), it seems that there is a max darkness that you can set with <meta name="theme-color" content="foo">. For example:

  • <meta name="theme-color" content="blue"> affects the header in both light and dark mode.
  • <meta name="theme-color" content="black"> affects the header in both light and dark mode.
  • <meta name="theme-color" content="#ffffff"> affects the header only in light mode.
Related