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.

Meta Tags

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.

Usage

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):

<meta name="theme-color" content="#3185FC">

Animating / changing the theme-color

You can also dynamically change the theme color using JavaScript - you can use this to animate it, make it match different sections of the page, change when a new theme is selected, or anything else you can think of!

To change the theme color using JavaScript, just select the meta tag and change the content attribute. For example, the following code will change the theme color to red:

//select the meta tag

var metaTag = document.querySelector("meta[name=theme-color]");

//change the content attribute

metaTag.setAttribute("content", "#ff0000");