Creating Themes for Google Chrome

For the past several weeks I’ve spent time here and there experimenting with creating themes for Chrome. If you haven’t created a theme before, it’s actually really simple. And if you’ve built apps or extensions for the Chrome Web Store, you’ll see that the process is very similar.

I created this HTML5 theme that uses the HTML5 logo and color scheme from the W3C.

New Tab Page screenshot You can see from this screenshot that it’s a very simple theme. The HTML5 logo is in the bottom right-hand corner of the New Tab Page, and there are custom colors or images for the frame around the browser, the area behind the tabs, the tabs themselves, and the text colors.

So, how do you create the theme? Luckily there’s documentation here and here. Some of the information in the wiki is slightly out of date (next on my todo list: update it!), but you will still be able to find the information you need there. Here’s a quick look at the steps I took to make the HTML5 Theme.

First, you need to set up the directory structure. I created a directory named html5theme. Then, inside that directory, I added another called images.
In the html5theme directory, I created a manifest file, called manifest.json. It looks like this:

{
  "version": "1.0",
  "name": "HTML5 Theme",
  "theme": {
    "images" : {
      "theme_frame" : "images/theme_frame.png",
      "theme_toolbar" : "images/theme_toolbar.png",
      "theme_tab_background" : "images/theme_tab_background.png",
      "theme_ntp_background" : "images/theme_ntp_background.png"
    },
    "colors" : {
      "frame" : [0, 146, 190],
      "toolbar" : [235, 235, 235],
      "tab_background_text" : [115, 115, 115],
      "bookmark_text": [0, 146, 190],
      "ntp_text" : [0, 146, 190],
      "ntp_link" : [0, 146, 190],
      "ntp_section" : [235, 235, 235],
      "control_background" : [235, 235, 235],
      "button_background" : [255, 255, 255]
    },
    "properties" : {
      "ntp_background_alignment" : "bottom right"
    }
  }
}

The version and name attributes are pretty self-explanatory. In the images section, I specified the images I wanted to use for the frame of the browser and area behind the tabs (just a plain turquoise image), the area that comprises the toolbar and the current tab (a gradient that goes from white to gray), the tabs that are in the background (just a plain gray image), and the New Tab Page background (the HTML5 logo), respectively. All of the images are stored in the images directory. I’ve found that it works best to use .png format for the images, rather than .jpg. The wiki has some helpful tips on recommended image dimensions and what all the different image options are. The colors section details the colors that are used for other elements of the browser window. The colors need to be specified in RGB format, and you can find details on what each color represents here. The last piece is the properties section, and that’s where I’m setting the alignment of the HTML5 logo to the bottom right of the New Tab Page.

After the manifest file and the images are ready, zip those files and upload them to the Developer Dashboard. In the Developer Dashboard, you’ll need to also upload a 128×128 icon and at least one 400×275 screenshot.

Here are a couple things I found helpful while I was learning to create themes:

  • Be sure you look at all the areas of the browser window to make sure your color schemes work everywhere. For example, check that the text in the Bookmarks Bar doesn’t blend in with the bar itself. Check the text color on the New Tab Page too.
  • Install your theme on multiple OSes, if possible, just to make sure it looks nice on all of them. While it should look the same, there might be differences.
  • To test your theme locally before you upload it to the store, type chrome://extensions in the omnibox, expand developer mode and click ‘Load unpacked extension…’. Then navigate to the parent directory for your theme to upload it. That will load your theme in your browser so you can test it out.
About these ads

About Jan Kleinert

I'm a web analytics engineer, a mom, a wife, a geocacher, and many other things.
This entry was posted in Uncategorized and tagged , , . Bookmark the permalink.

4 Responses to Creating Themes for Google Chrome

  1. Fred says:

    Great stuff! I also have recently have been playing around with chrome themes as well. Currently I am attempting to find a way (if possible) to change the color (background and text) of the area on the bottom left of chrome, the area where that displays the url of a link being hovered over. Wondering if this is possible.

  2. Great Stuff!!! I want to make a theme but I’m only 13…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s