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

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!


Now read this

Front-end Dev Tools

I recently came across a web tools list1 and decided to compile a similar list of tools that have been making my life easier as front-end dev. Tools # As far as tools go, there’s always new stuff and sites like Product Hunt2 ensure folks... Continue →