Byron Buckley

< Back to Blog

Using the theme-color meta tag to set the mood on your website

Published November 19, 2014

    By now many of you might have come across tutorials on how to use the theme-color meta tag to set the toolbar color in Chrome 39 on Android. The instructions are simple enough, and so far I've come across a few websites utilizing the feature for consistent branding; for example, clothes the toolbar in the same blue color used in their logo and across their website.

    What I haven't seen in action is dynamic toggling of the theme-color across various pages or sections of a site, so I decided to try it out.


    My personal website uses a different background color for each section of the page, I wanted to extend this color to the toolbar as well. The process is pretty simple:
    First I set the default theme-color to the body text color.
    <meta name="theme-color" content="#f2ede3">

    Then I "cached" some variables for future use.

    var $themeColor = $('meta[name="theme-color"]');
    var bodyColor = $('body').css("color");`  

    Next I located the event handler for the section changes and added the following:

    var bgColor = $section.css('background-color');
    $themeColor.attr('content', bgColor);

    The home and close icons link to the home page so on that event we go back to the body text color we cached earlier. While we could hard code this value, the premise is, should the body text color change, we don't want to have to change it in multiple locations.
    $themeColor.attr('content', bodyColor);

    The custom toolbar color also helps to find your page in a sea of off-white windows and tabs.


    And thats it, now I have a slick color toolbar color consistent with the page contents.

    Have fun trying it out!