How to create your own custom Google Chrome theme

by on

Making your own Chrome Themes

Google Chrome themes are favorite add-ons for its users and you can find thousands of them all over the internet, with the largest source being Chrome Web Store.

But many curious users would like to create their own personal themes or even share them with their friends and the outside world.

This little tutorial will show you the inner structure of Google themes and how you can make your own from any pictures.

Structure of Chrome Themes

Google Chrome Theme

A Chrome Theme is nothing but an add-on that does not contain any extensive source code or scripts and basically consists of two parts:

  1. images used for the theme itself
  2. a single manifest.json file that contains parameters and settings to form the theme

These two parts are then packaged into a single file with the CRX file extension.

How to manually prepare Google Theme

You will certainly need a suitable wallpaper you want to use for your theme and also a basic idea about your theme as whole. But you will also need several software tools to make this happen:

  • A picture editor. Use any program you like, there are plenty software tools available for you to use. Even basic Microsoft Paint will do, but of course you can use professional tools, such as Adobe Photoshop or CorelDraw.
  • A text editor. Basic Notepad will do, as will any other similar program.

Once you have all this, just follow the steps below to create your own Google Chrome theme.

Step 1: Create a directory with the name of the theme

One of the first thing you will do, is to create a new directory for your theme and name it after your theme. Lets say "my_new_theme". Inside this folder create another one, named "images", which will contain all images used by your new theme.

Step 2: Create the images for your theme

To create a working theme you will need four basic image elements, or five, if you want to add your own personal logo to the theme, but that's pure optional. All images used in Google Chrome themes have to be in PNG file format.

If you have your pictures in some another format, you will have to first convert them to PNG with any software or online converting tools available.

Here is the list of every image element with proper requirements:

Theme Frame (frame.png)

This image is used for the frame of your new Google Chrome theme and as the background image of the "Close", "Minimize" and "Maximize" buttons. If you don't want to use this image, then your created Chrome theme will act as the default Chrome theme and display the native OS title bar.

The theme frame image needs a minimum height of 30px with no limitation on its width. This element is usually made with the darkest colours.

Theme Toolbar (toolbar.png)

This theme element is displayed as the background of the "Forward", "Back" and "Refresh" button and also as the extensions toolbar. It represents both the current tab and the toolbar.

It needs a minimum height of 120px with no limitation on its width.

Theme Tab Background (tab.png)

Used for inactive tabs if more tabs are opened at the same time. It has a minimum height requirement of 65px and no limitations on its width.

New Tab Page Background (background.png)

This will represent the main image that is displayed when a new tab is opened. The recommended minimum image size is 800x600, but for best look, use wallpapers matching the screen resolution of the display the theme will be used on. This image should use the lightest colors for best visual presentation.

Theme Attribution (theme_ntp_attribution.png)

The creator logo, it is shown at the bottom right corner of the Google Chrome theme. It is purely optional.

Once you have all the image elements prepared, just move them in the "images" directory you created in step 1, thus the folder should contain 4-5 images.

Step 3: Create the manifest file

Every Google Chrome add-on that can be installed as web application or theme has its own "manifest.json" file. This file provides the browser with information about the theme.

You can find more information about JSON file format in our database.

The manifest contains code for 4 different things: name, images, colors, tints and properties. An example of  the code in manifest.json file is shown below.

{
  "version": "1.0",
  "name": "my_new_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],
                "frame_inactive": [0.50, 0.50, 0.50],
                "frame_incognito_inactive": [0.50, 0.50, 0.50]
    },
    "properties" : {
         "ntp_background_alignment" : "bottom",
    "ntp_background_repeat": "no-repeat"
    }
  }
}

Just open a new file in notepad, copy paste the code and save with the name manifest. After that, just rename the file extension from txt to json.

Now that you have created your own manifest.json file, lets take a look on what each of the sections means and does and what you can edit.

Name

That's the name of your new Google Chrome theme. The name in the manifest.json file should correspond to the name of your theme written in Step 1.

Images

Images from Step 2 of our guide are defined in this section of the manifest.json file. If you want to change the file name or folder of your images, you have to make a corresponding change in the manifest.json file as well.

Colors

Each element in this sections defines the colors used in the theme. There is just couple of things to remember about colors:

  1. The download toolbar button text color is the same as the bookmark text's color.
  2. The status bar background color is the same as the toolbar color you choose.
  3. The status bar text color is the same as the tab text color you choose.

Tints

The tint element specifies the color tint for all icons inside all the buttons in the toolbar (forward, back, refresh, etc.). Each tint has a floating value from 0 to 1 or -1. The -1 value means no changes will be made to the color of that element. The tints values are arranged as [Hue, Saturation, Luminance] and you can use values like for example  0.256, 0.2, -0.4 to define the color. You can adjust the values to make the buttons blend it or stand out.

Properties

The properties sections in the manifest.json file is used to define the settings for the main background image. The background image can be aligned either to top, bottom or the center of the browser and you can choose to either repeat it along the x or the y axis, or not at all.

Step 4: Packaging and previewing your theme

Now you should have your images ready in the  "my_new_theme/images" directory and and a manifest.json file in the "my_new_theme" directory.

To test your new theme, open your Google Chrome internet browser and type "chrome://extensions" in the address bar and hit the enter key.

Once you are inside, click on the "+" next to the "Developer model" link on the right side. You should now see a couple of options appear on the page. Click on the "Load unpacked extension" and browse through your computer to you "my_new_theme" directory. Select it and press OK. If a proper manifest.json file is present in that folder, Chrome will load your new theme. Now check your browser if everything is alright.

You can repeat this process until you tweak your own Google Theme to its perfection. Once you are satisfied with your custom Google Chrome Theme, just press the "Pack extension" button and Chrome will create a the theme and save it in the "my_new_theme" directory with a CRX file extension. A file with PEM file extension will also be created, which is a private key for your Google theme, that will allow you to update this extension in the future, if you upload your theme to the Chrome Extensions Gallery.

If everything goes fine, Google Chrome will tell you that the .crx and .pem files have been created and it will also display the location of these new files. After you have created couple of Google Chrome themes, you will see, that its really not that hard.

How to make Chrome Themes more easily

You can of course do things more quickly if you use some of the dedicated tools for Chrome Themes. One of such tools was, the now discontinued, Theme Creator. You can still download it from web store and use it, but it is no longer supported by Google and there may be glitches. Still it is one of the most convenient ways how to quickly make new Chrome Themes.

Related software and links:

Google Chrome icon

Google Chrome    Microsoft Windows platform
A popular Internet browser from Google

 
Google Chrome for Mac icon

Google Chrome for Mac    Apple macOS / Mac OS X platform
Mac version of the popular web browser from Google

 

Did this entry help you?
If the information in this article helped you, please share it with your friends!

Subscribe to File-Extensions.org and get our news everywhere!

RSS

Add new comment about “How to create custom Chrome theme

Related file extensions

crx - Google Chrome extension installer file format

Go to:
Article related software
Add comments...

Follow us!

Enter any file extension without dot (e.g. pdf)
Search for file extension details and associated application(s)

RSS feed