How to set color of iPhone X status bar?-CodePudding

I have a website (written in HTML and CSS) with a fixed header in blue. Nothing special so far.

Now I want, that the status bar next to the notch of iPhones becomes blue as well.

Take this app for an example, where the header is red until the edge of the screen:

Instead of this my page looks like this (the status bar is grey instead of blue):

Is there any help for this issue?

CodePudding user response：

You can't fully change the color but at least in iOS 15 the address bar is translucent. Doesn't look like your iOS is up to date and I can't remember if that was true before, but this might help:

:root {
     background-color: whatever;
}

In iOS 15 that's needed for the top menu bar to color correctly and not just match a random color on the page. I've seen a handful of popular websites fail to fix this.

CodePudding user response：

It seems like you want to use a meta tag with the name theme-color. To make the top the color #39ff14 you can add this in the head section of your html:

<meta name="theme-color" content="#39ff14"/>

However, this attribute only works on some browsers ( Can I use link ).