Geek Answers Handbook

Change the color of a Chrome tab using JavaScript or jQuery

In Chrome, you can set the color of a tab with a meta tag:

<meta name="theme-color" content="#FFA000">

I have several color-coded sections on my site. To make it look better, I would like to dynamically change the color of the tab in accordance with the currently open section. I tried to do this using jQuery:

 $("meta[name='theme-color']").attr('content', '#455A64');

But that does not work. I would be very happy if someone told me if / how you can change this meta-value at runtime.

Edit: after some checks, I noticed that the code changes the contents of the meta tag, but Chrome does not update the color of the tab.

+7
javascript jquery android google-chrome meta-tags
source share
3 answers

For this, anyone who lands on this page from Google is looking for a JS Vanilla solution:

 document.querySelector('meta[name="theme-color"]').setAttribute('content', '#123456');
+3
source share

Your jQuery code is correct. If you want to tag the title bar and disconnect users, try the following:

 <!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 tested this on my Nexus 5 with Chrome 40.0.2214.89 and Android version 5.1.1 and saw how it works. Not sure what to think about this type of function though ...: P

Not all violin tools will allow you to show the effect, because I think that using an iframe may prevent you from playing it correctly. I found that Plnkr really worked. A visit to this Plnkr demo showed an effect on the aforementioned device.

+1
source share

It turns out that it does not work with Android versions 64.x and 44.x. In other versions, all the code above works. In version 45.x, it even disappears from one color to another, which makes it really cool!

+1
source share

More articles:


All Articles