Change Chrome tab color with JavaScript or jQuery
For this who land on this page from Google looking for a vanilla JS solution:
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#123456');
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!