Change Chrome tab color with JavaScript or jQuery

11,807

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!

Share:
11,807

Related videos on Youtube

Sir_baaron
Author by

Sir_baaron

Updated on September 19, 2022

Comments

  • Sir_baaron
    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
      Jeroen about 8 years
      Wow, had not heard of theme-color before (and took me a sec to realize you're talking about Android Chrome).
  • Sir_baaron
    Sir_baaron about 8 years
    Well, turns out, it doesn't work in Chrome version 44.x I downgraded to Version 39 and now it works perfect!