Google Chrome Theme Tutorial

1st Method (Easy) - You can create a simple Google Chrome theme by using this extension or this website (thanks to Kesler) that will automatically produce one from pictures and colors.



2nd Method (Advanced) - Follow this tutorial so you can create a professional theme and customize it more. I will base this entire tutorial on the theme I created for Georgia Southern University here so that you will have a base template to modify :)

Step 1: Download the sample theme

Download this zip file: Nazim Chrome Theme ( Use 7-Zip if you need software to open zip archives).

Step 2: Extract the zip file 

Now you will see a folder named images and a file named manifest.json. Put these two in a folder by themselves, don't let anything else be in that folder.

In the example below I put the two in a folder called My Chrome Theme

Step 3: Modify the basics

Use a text editor to open manifest.json, don't use Notepad or anything too simple. For example, in Windows 7 you can use Open Office or WordPad, in Linux I would recommend Leafpad or Gedit. I don't have a Mac so not sure what to recommend, but the point is when you open the file, it must keep the formatting like the image below! 
The spacing, commas, brackets..etc are all important, so don't mess with those. 

Step 4: Modify the following parameters

description - This will be the short description they see under your title in the Web Store.
name - The name displayed in the Web Store.
version - The version of your theme, helps you keep track of version changes.

Here is what I changed
Click save once you are done, but don't close the file. 

Step 5: Modify the images

In the manifest.json file, look under the section where it says images. Next to theme_ntp_background you will see where it is corresponding to the image of the background. The background image is called ntp_background.png, so if you go to your theme folder and look inside of the images folder, you will see this image. 

If you want a different background, this is where you have to be creative and create a background that matches your schools colors and logo. Just replace the ntp_background.png and keep the same name. 


Note: If you use an image.jpeg make sure that you change the name of the background in the manifest.json file, but I recommend that you use the same names and extensions to make it easier. 

Do the same for every image in this folder, replace them with colors and gradients for your school. I created all of these individually using GIMP, but you can use whatever photo editor you want. Remember that when you create your images, I recommend that you use the same name and extension. For example, if you create a new background, keep the name ntp_background.png

Picture dimensions:
  • Frame                                                 64x128             
  • frame_default_inactive                      64x128
  • ntp_background                                 Whatever resolution you want
  • theme_button_background               120x120
  • theme_tab_background                     64x128
  • theme_tab_background_glass           64x128
  • theme_tab_background_incognito    64x128
  • theme_toolbar                                    64x128

Step 6: Change the colors

In the manifest.json file, there is an entire section for colors and it is based on the RGB system. Open this website and lets says you want to use the first color listed there: indian red R=176 G=23 B=31

This is how it should look if you want the bookmark texts to be indian red when you type it in the manifest.json file:
Here is an easier way to figure out what you want to modify, originally from here:

Image Elements

Image elements are defined under the "images" section in the manifest.json file.

NumberDescriptionmanifest.json NotationRecommended Size (W x H)
1The frame of the chrome browser/the area that is behind the tabs."theme_frame"∞ x 80
1. 1The same area as above, only that this represents the inactive state."theme_frame_inactive"
1. 2The same area under the incognito mode, when the window is active"theme_frame_incognito"
1. 3The same area but in the incognito mode, when the window is inactive."theme_frame_incognito_inactive"
2This represents both the current tab and the toolbar together"theme_toolbar"∞ x 120
3This is the area that covers the tabs that are not active"theme_tab_background"∞ x 65
3. 1The same thing as above, but used for the incognito mode"theme_tab_background_incognito"
4(Not yet confirmed) The tab background for something!"theme_tab_background_v"
5This is the theme's inner background-the large white space is covered by this"theme_ntp_background"Recommended Minimum Size for images 800 x 600
6This is the image that appears at the top left of the frame"theme_frame_overlay"1100 x 40
6. 1Same as above but displayed when window is inactive"theme_frame_overlay_inactive"
7This is the area that covers the toolbar buttons"theme_button_background"30 x 30
8This is the image that will be displayed in the 'theme created by' section"theme_ntp_attribution"
9The background for the window control buttons (close, maximize, etc.,)"theme_window_control_background"

Color Elements

Color elements are defined under the "colors" section in the manifest.json file.

Colors are entered as RGB values, some elements can contain opacity value also. e.g. "ntp_section" : [15, 15, 15, 0.6]

NumberDescriptionmanifest.json Notation
10The color of the frame, that covers the smaller outer frame"frame"
10. 1The color of the same element, but in inactive mode"frame_inactive"
10. 2The color of the same element, but in incognito mode"frame_incognito"
10. 3The color of the same element, but in incognito, inactive mode"frame_incognito_inactive"
10. 4The color of the toolbar background (visible by pressing Ctrl+B)"toolbar"
11The color of text, in the title of current tab"tab_text"
12The color of text, in the title of all inactive tabs"tab_background_text"
13The color of the bookmark element's text"bookmark_text"
14The theme's inner background color"ntp_background"
14. 1The color of all the text that comes in the inner background area"ntp_text"
14. 2The color of the links that appear in the background area"ntp_link"
14. 3The color of the underline of all links in the background area"ntp_link_underline"
14. 4The color of the section frames when mouse over"ntp_header"
14. 5The color of Recently closed tabs area's bg and frame of quick links"ntp_section"
14. 6The color of text in the section"ntp_section_text"
14. 7The color of the links that appear in the section area"ntp_section_link"
14. 8The color of underline of links in the section area"ntp_section_link_underline"
15Unconfirmed yet-The color of the window control buttons (close, maximize, etc.)"control_background"
16The background color of all the toolbar buttons"button_background"

Tint Elements

Tint elements change the hue, saturation and lightness of images.

Tint elements come under the "tints" section in the manifest.json file.

NumberDescriptionmanifest.json Notation
17The color tint that can be applied to various buttons in chrome"buttons"
18The color tint that can be applied to the frame of chrome"frame"
18. 1The color tint that is applied when the chrome window is inactive"frame_inactive"
18. 2The color tint to the frame-in incognito mode"frame_incognito"
18. 3Same as above, but when the window is inactive (and in incognito mode)"frame_incognito_inactive"
19The color tint of the inactive tabs in incognito mode"background_tab"

UI Property Elements

Property elements come under the "properties" section in the manifest.json file.

NumberDescriptionmanifest.json Notation
20The property that tells the alignment of the inner backrground image"ntp_background_alignment"
21This property specifies if the above background should be repeated"ntp_background_repeat"
22This lets you select the type of google chrome header you want"ntp_logo_alternate"

Step 7: Test your theme

Lets test the simple modifications you have just done. In Google Chrome go to Settings >> Extensions >> Check developer mode >> Load unpacked extension >> go to the folder where you made your theme, in this example it's the folder called My Chrome Theme. 

Step 8: Create a zip file

Once you are done testing your theme and ready to submit it, we have to create a zip file containing only the images folder and manifest.json file. If you are using 7-Zip, select the folder and file, right-click >> 7-Zip >> Add to "My Chrome Theme.zip" 

Now you will have a zip file called My Chrome Theme.zip. This is the file that we will submit to the Chrome Web Store.

Step 9: Submit your theme to the Chrome Web Store

Go to the Web Store and click on the settings icon at the top-right and go to Developer Dashboard. From here you can submit a theme or an extension, there's a $5 charge you have to pay only once so they can verify who you are and prevent spam.

If you want more information, you can visit the Official Chrome Theme Guide