In Safari 15, a new feature got released which tints the address bar and tab bar to match the color of the header of the current website.

I've noticed that this new feature does not work on any of the websites I previously created. Which makes me wonder. How exactly does this website tinting feature work? Can we control which color the bar will get using CSS or a combination of HTML and CSS?

CodePudding user response：

After looking around online a bit, I found that you can use the following <meta> tags in your HTML, so set the color of the address bar:

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#ffffff">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#ffffff">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#ffffff">

Source

So to get the color in Safari, the apple-mobile-web-app-status-bar-style will likely work.

(I do not have Safari, so I cannot test this myself. I think this would work though)