Change theme-color via JavaScript

Nov 04, 2016 Chrome JavaScript

A few days ago I have found Android chrome tab color and today I wanted to know if it can make sense to change the theme-color via JavaScript. I was not sure if the chrome browser will update the tab color.

Changing theme-color randomly

To my surprise the chrome browser is really updating the tab color with the changing content tag of the meta element with name theme-color. If you are visiting the current post with the chrome browser of an android smartphone you should see a changing tab color every three seconds.

JavaScript code

The following code requires that your HTML contains the meta element.

<meta name="theme-color" content="#84db94">

Here the JavaScript code to change the theme-color randomly every three seconds.

function getRandomRGBValue() {
    return Math.min(Math.floor(Math.random() * 255 + 1), 255);
}

function getRandomColor() {
    var r = getRandomRGBValue(),
        g = getRandomRGBValue(),
        b = getRandomRGBValue();
    return "#" + (((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1));
}

function changeThemeColor() {
    var metaThemeColor = document.querySelector("meta[name=theme-color]");
    metaThemeColor.setAttribute("content", getRandomColor());
    setTimeout(function() {
        changeThemeColor();
    }, 3000);
}

changeThemeColor();

Changing chrome tab colors

Here are some different colored tabs that are changing every three seconds.

This works also if the tab is not active.