Change Chrome tab color with JavaScript or jQuery
In Chrome you can set the color of a tab with the meta tab
<meta name="theme-color" content="#FFA000">
In my website I have several sections color-coded. To make it look better, I would like to dynamicly 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.
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.
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!
对于这位来自谷歌寻找香草JS解决方案的人：
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#123456');