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?
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">
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)
You can learn how to do this at https://developer.apple.com/safari/.
Also, I just want to point out that some colors are prohibited, meaning that they won’t work. Learn More