Have you recently visited a website and spotted that the color bar on the website is the same as the website’s brand colors?
This can be achieved on the Safari and Chrome browse, matching the browser bar with you brand colours is a good way to keep your brand identity through the site.
Now you are probably thinking this would require a lot of code to pull off, luckily this is as easy as adding one line of HTML to the head section of your website and change the color to your choice.
<meta name="theme-color" content="#000">
With this setting your website has a subtle effect moving it a little step closer to a native app experience. You can also use it to extend your design, like our website.
Changing status bar on Safari
On Safari only the status bar can be changed. If you choose ‘black-translucent’ it will float above the content, like a fixed position element in CSS.
If you want to try more styling you can view the developer guides below: