Change the color of the URL bar with HTML
If you've ever visited this site on an Android phone, you might notice the status bar and URL bar match the color of my site. Surprisingly, it's really easy to change the color using HTML.
There's an HTML tag called
meta that can be used to tell search engines and browsers about your site. The tag is commonly used to set the description of a page (
<meta name="description" content="...">) or making your page mobile friendly (
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">), but it can also be used to set the "theme color" of your website. Although it's only supported in the Chrome browser on Android phones, it's one of the most popular browsers, so, according to caniuse.com, you'll still be affecting about 30% of users.
The theme color meta tag is really simple to use. Just select a hexadecimal color, and add this code to the
head tag on your website (replace the color with your theme color):
1<meta name="theme-color" content="#3185FC">
Animating / changing the theme-color
meta tag and change the
content attribute. For example, the following code will change the theme color to red:
1//select the meta tag
2var metaTag = document.querySelector("meta[name=theme-color]");
3//change the content attribute