How To Create A Chrome Theme From Your Favourite Wallpaper

Ever since Chrome’s theme gallery launched, we’ve seen a steady flow of awesome themes. They’re great, but what if you want to create your own? It’s much easier than you might think.

A Chrome theme is nothing but an extension that does not contain any JavaScript or HTML code. Any given theme consists of 2 elements:

1. A few images
2. A .json manifest file.

These elements are then packaged in .crx format. (The .crx file format is just a variation of ZIP that is used by Google Chrome.)
Here is a Chrome theme I created form one of my favourite car wallpapers, using the procedure described below.

Before:

After:

If you notice, I had to darken the image a bit to make sure all the links shown on the new tab page are clearly visible against the background image.

Things you will need to create a Chrome theme:

• The wallpaper you’d like to use as a part of the theme.
• An image editor for adding effects, if required. (I prefer Aviary Phoenix, but you have a host of other options. MS Paint works out well most of the times; Paint.net is excellent and free if you need something a little more powerful.)
• A basic text editor like Notepad (I prefer Notepad or Notepad ++, but you have several options.)
• Some creative ideas about how your theme should look.

Once you have the required tools, here’s how it works:

Step 1: Create a folder with the name of the theme.

Once you create this folder, create another folder inside it and label it “images”. This folder will contain the images that you would use in your theme.

Here, “My theme” represents the name of our theme with the images folder inside it.

Step 2: Create the images for your theme

You would need four basic image elements to make a good looking theme. A fifth element which shows the theme creators logo, is optional. They are described below along with the required dimensions and screenshots.

1. Theme frame – This image is displayed as the frame of your Chrome theme and the background image of the “Close”, “Maximize” and “Minimize” buttons. If you decide not to use this image, then your chrome theme will act like the default Chrome theme and display the native OS title bar.
   Image Requirements: Minimum height: 30px, no limitation on width.
2. Theme toolbar – This image is displayed as the background of the forward, back and refresh buttons as well as your extensions toolbar. It represents both the current tab and the toolbar together.
   Image Requirements: Minimum height: 120px, no limitation on width.
3. Theme Tab Background – This image is displayed on the inactive tabs, when multiple tabs are open.
   Image Requirements: Minimum Height: 65px with no limitation on width.
4. New Tab Page Background – This is the main image that is displayed when you open a new tab. The minimum recommended image size is 800×600, but any wallpaper matching your screen resolution works out best.
5. Theme Attribution – This is the image that appears at the bottom right corner of any Chrome theme. It is optional and can be used if you would like the theme users to know, who created the theme.

Once you have the images ready just paste them inside the images folder we created in step one.

This is how our theme folder looks once we’ve pasted the required images in the “images” folder.

Tips for creating good images to go along your main background image:

• Try and use the closest matching colours for your theme. To get an idea which colours would go well with your wallpaper, start by creating a colour palette from your main image.
• You can use any image editor to crop a part of your main image and resize it according to the image dimension requirements. For example, I created a theme called Ethereal 2, where the same image has been used as the main background and the Frame image.
• If you prefer to use gradient as a part of your images, you can use this excellent tool by Dynamic Drive to create gradients of required dimensions.
• As a general thumb rule, the frame should be darkest and the background tab image should be lightest in colour. This of course may vary according to the image you have selected.

Step 3: Create the manifest file

Every Chrome extension, installable web app, and theme has a JSON-formatted manifest file, named manifest.json, that provides information about our theme to the browser. (JSON is just a fancy name for a way of formatting data—don’t let it intimidate you.) It consists of four elements: images, colours, tints and properties. A basic manifest which works well for all themes is shown below. A sample theme manifest can be downloaded from here.

{

“version”: “1.0”,

“name”: “My Theme”,

“theme”: {

“images” : {

“theme_frame” : “images/frame.png”,

“theme_toolbar” : “images/toolbar.png”,

“theme_ntp_background” : “images/background.png”,

“theme_tab_background” : “images/tab.png”,

“theme_ntp_attribution” : “images/theme_ntp_attribution.png”

},

“colors” : {

“ntp_link”: [255,255,255] ,

“ntp_text”: [255,255,255] ,

“ntp_section_link”: [255,255,255] ,

“ntp_section_text”: [10 , 17 , 27] ,

“ntp_background”: [10 , 17 , 27] ,

“frame”: [10 , 17 , 27] ,

“toolbar”: [10 , 17 , 27] ,

“tab_text”: [255,255,255] ,

“tab_background_text”: [10 , 17 , 27] ,

“bookmark_text”: [255,255,255]

},

“tints” : {

“buttons” : [0.33, 0.5, 0.47]

},

“properties” : {

“ntp_background_alignment” : “bottom”,

“ntp_background_repeat”: “no-repeat”

}

}

}

Now that you have seen the code, it’s time to understand the sections and how each section modifies the theme.

• images – Image elements used in the theme are defined under the “images” section in the manifest.json file. These are the images we created in Step 2 and have placed in the “images” folder. You would need to input the image name the way you have named them inside the images folder.
• colours – Each element under this section defines the various colours used in the theme. Which element corresponds to each part of the theme is shown below

• A few points to remember while selecting the colours for your theme:

  1. Status bar background colour is same as toolbar colour you choose.
  2. Status bar text colour is the same as tab text colour you choose.
  3. The toolbar button (download toolbar) text colour is same as bookmark text’s colour.
• tints – This tint element is used to specify a colour tint for icons inside all the buttons in the toolbar (back, forward, refresh, etc.). The value of the tint is in floating values ranging from 0 to 1 or -1. In this manifest file we have used just one element “buttons”, which is the most commonly used.
• The value of the tint is in floating values ranging from 0 to 1 or -1. If you use -1 then no changes are made to the colour of the element. The tints values are arranged as [Hue, Saturation, Luminance]and you can use values like 0.346, 0.1, -0.5. Adjust them to make the buttons stand out or blend in.
• properties – In a theme manifest, you can use the properties section to adjust the behaviour of the main background image. You can align the image to the top, bottom, or centre of the browser and choose to either repeat it along x or y axis, or not at all.

Now that you have the manifest file ready, you can save it in the “My Theme” folder.

This is how our theme folder looks after the manifest file is in place.

A simple theme package, consisting of a manifest and images for the Classic Blue Chrome theme, can be downloaded from here. You can use this file as an initial reference for getting started with a new theme.

Step 4: Packaging and previewing your theme

Now that you have your images and manifest file ready, it’s time to test the theme. The first thing to do is to open Google Chrome and open the extensions page. You can open the page by typing “chrome://extensions/” in the address bar and hitting the enter key.

Once there, click on the + sign next to the “Developer mode” link on the right. You would see a few new options on top the page. Click on “Load unpacked extension” and navigate to our “My Theme” folder.

Click on My Theme folder and click OK. If all goes well, Chrome will load the theme in the browser. Look around and see if everything looks good.

Troubleshooting: If you get an error dialog saying you could not load the extension, make sure your manifest file has valid JSON formatting and is called manifest.json (not manifest.json.txt or manifest.json.rtf ). You can use a JSON validator to make sure your manifest’s format is valid. The error message, if any, will also display the exact line number of the error – so rectifying it would be easy.

Once you are satisfied with the preview, click on Pack extension button, and Chrome will create a theme and save it in the parent folder of My Theme folder.

This would also create a PEM or private key for your theme to allow you to update this app in the future, once its uploaded in the Chrome extensions gallery. If all goes well Chrome will tell you that your .crx and .pem files have been created. It also displays where these files have been created.

If you try out the above process a couple of times, you would come to know how easy it really is and Chrome actually allows a lot of customisation in a theme. We have included a small number of elements in the manifest above, which allows one to create a decent looking theme. If you want to dive deeper you can check the Chromium theme creation guide.

If you are interested in creating Chrome Web Apps, using a similar process described above, I’ve also written a tutorial on creating your own Chrome Web Apps.

Although there are resources for creating Chrome themes online and on the desktop, but they has certain limitations. The major one being, that it doesn’t allow a file bigger than 2 mb to be uploaded for creating a theme, and most PNG wallpapers are almost always bigger in size. The offline theme creator is fairly basic and buggy. Since its initial release, a lot of things have changed in Chrome, and those changes haven’t been updated in this software.

If you are interested in seeing what kind of themes can be created using the above tutorial, you can view a number of themes we’ve created in my Google Chrome themes gallery.

The tutorial above might seem complicated, but the overall process is fairly easy. If you’re comfortable with basic image editing and copying and pasting simple code, you’ll do just fine.

If you have any questions, doubts or suggestions share them in the comments.