Change Chrome tab color with JavaScript or jQuery
Solution 1
For this who land on this page from Google looking for a vanilla JS solution:
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#123456');
Solution 2
Your jQuery code is correct. If you want to flicker the title bar and drive your users off, try this:
<!DOCTYPE html>
<html>
<head>
<title>Unicorns!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="theme-color" content="#FF0000">
</head>
<body>
<h1>Unicorns are <b id="x">#FF0000</b></h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
var i = 0;
var colors = ["#FF0000", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF"];
setInterval(function() {
var color = colors[i = i++ > 4 ? 0 : i];
$("meta[name='theme-color']").attr('content', color);
$("#x").text(color);
}, 500);
});
</script>
</body>
</html>
I've tested this on my Nexus 5 with Chrome 40.0.2214.89 and Android version 5.1.1, and seen it work. Not sure what to think of this type of feature yet though... :P
Not all fiddle tools will allow you to show the effect though, because I think use of iframes may prevent you from reproducing it properly. I've found that Plnkr did work though. Visiting this demo Plnkr showed the effect on abovementioned device.
Solution 3
Turns out, it doesn't work with android Chrome versions 43.x & 44.x. In other versions all the Code above works. In version 45.x it even fades from one color to the other, making it look really cool!
Related videos on Youtube
Sir_baaron
Updated on September 19, 2022Comments
-
Sir_baaron about 1 year
In Chrome you can set the color of a tab with the meta tag:
<meta name="theme-color" content="#FFA000">
In my website, I have several sections color-coded. To make it look better, I would like to dynamically change the tab's color according to the currently opened section. I have tried doing it with jQuery:
$("meta[name='theme-color']").attr('content', '#455A64');
But it doesn't work. I would be very glad if someone can tell me if/how you can change this meta value during runtime.
Edit: After some checks I noticed that the code does change the meta tag content, but Chrome doesn't update the tab color.
-
Jeroen about 8 yearsWow, had not heard of
theme-color
before (and took me a sec to realize you're talking about Android Chrome).
-
-
Sir_baaron about 8 yearsWell, turns out, it doesn't work in Chrome version 44.x I downgraded to Version 39 and now it works perfect!