Search code examples
htmlcssiphone

How to set color of iPhones top bar?

I have a website (written in HTML and CSS) with a header in blue.

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

Take this example, where the iPhones top bar is red as well as the pages header.

enter image description here

Instead of this the top bar about the webpage is grey.

Is there any advice for this issue?

Solution

  • 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).