CODEWITHSUNDEEP
htmlcssiosmobile-safari
Steven León
Steven León

Reputation: 183

Change the Address Bar background color on Safari IOS with CSS

I'm building a website and I was starting the cross browser testing, being on Safari on IOS I see that the address bar and the status bar doesn't take the color of the website, searching a bit I find the meta tags for solve that problem

<meta name="theme-color" content="#07070f">
<meta name="msapplication-navbutton-color" content="#07070f">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="#07070f">

It works for the status bar but in the case of the address doesn't change

Picture showing what I'm explaining

I searched a lot through the internet but I was unable to find a solution for this, I also have the same background color on main, header and footer that the given in the meta tag and a :root style setted with color-scheme: dark

Upvotes: 8

Views: 13653

Answers (2)

noir
noir

Reputation: 21

I found a better solution, just paste it into head:

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

Upvotes: 2

Steven Le&#243;n
Steven Le&#243;n

Reputation: 183

If someone has the same issue that me here's what works for me:

after a bit of struggling searching a solution I see that the problem being on that I haven't declared the body with the background-color of the page (the same as I given to the meta tag) like this

body{
    background-color: #07070f;
}

And in the HTML meta tag:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

I deduct that this takes the body color and with the content given in black-translucent works fine, but maybe you should try different things to find the correct one, hopefully will help someone

Upvotes: 7

Related Questions