Create A Chrome Theme

A Theme is a special kind of extension that changes the appearance of your chrome browser. Chrome Themes are packaged like regular extensions, but they don’t contain JavaScript or HTML code.

Personalize Google Chrome on your computer by creating your own theme. Follow these steps to learn how.

Requirements:

*Text Editor
*Image Editor (Adobe Photoshop or Paint)
*Google Chrome developer account if you want to upload it to Google Chrome

Step 1: Create a Directories

In a directory (a regular folder), there should be a text file named (manifest.json) and a subfolder named images.

 

 

Step 2: Make Your Theme

1. Frame: 1920px by 30px; name the file (frame.png) and place in the image folder.
2. Toolbar: 1920px by 120px; name the file (toolbar.png) and place in the image folder.
3. Tab: 1920px by 80px; name the file (tab.png) and place in the image folder.
4. Background: size varies on computer and image resolution: Test anything from 800px by 600px to 1920px by 1080px. Name the file (mytheme.png) place in the image folder
5. Logo: 150px by 30px; name the file (logo.png) and place in the image folder

Step 3: Manifest.json Text File Code

Copy the .json code below in to the manifest.json text file. Make sure the names on the corresponding lines are the same as the names of the png files. Also, you can further customize the image, text colors, and button colors. However, your theme will not upload if there is any mistakes. Go to this site to test if your code is correct.

{
"description": "Description of theme",
"version": "1.0", "manifest_version": 2,
"name": "Name of your theme",
"theme": {
"images" : {
"theme_frame" : "images/frame.png",
"theme_toolbar" : "images/toolbar.png",
"theme_ntp_background" : "images/mytheme.png",
"theme_tab_background" : "images/tab.png"
"theme_ntp_attribution" : "images/logo.png"
},
"colors" : {
"ntp_link": [255,255,255],
"ntp_text": [255,255,255],
"ntp_section_link": [255,255,255],
"ntp_section_text": [100 , 100 , 100],
"ntp_background": [0 , 0 , 0],
"frame": [255 , 255 , 255],
"toolbar": [255 , 255 , 225],
"tab_text": [100,100,100],
"tab_background_text": [100 , 100 , 100],
"bookmark_text": [100,100,100]
},
"tints" : {
"buttons" : [0.99, 0.99, 0.99],
"frame_inactive": [0.99, 0.99, 0.99],
"frame_incognito_inactive": [0.99, 0.99, 0.99]
},
"properties" : {
"ntp_background_alignment" : "center",
"ntp_background_repeat": "no-repeat",
"ntp_logo_alternate" : 1
}
}
}

Extra Help:

Colors:

• The color is in RGB format (Red, Green, Blue) use this site for help.
  “ntp_text”: text color of the apps
  “ntp_background”: color of the area where the image does not cover
  “tab_text”: text color of the current tab
  “tab_background_text”: text color of the unused tabs
  “bookmark_text”: color of the text in the bookmark bar

Tints:

• The value of the tints are floating values that range from 0 – 1 or -1. If you use -1 then there will be no color change.
• The color values are arranged as (Hue, Saturation, Luminance). You can choose to make the buttons stand out or blend in.
  “Buttons”: color of the icons in the toolbar (back, forward, refresh, etc.)

Properties:

• If the image is bigger than the screen size the part of the image that will show will depend on the alignment choice.
• If the image is smaller than the screen size than the position on the browser of image will depend on the alignment choice.
  “ntp_background_alignment”:  (“center”, “top”, “bottom”, “right”, “right top”, “right bottom”, “left”, “left top”, “left bottom”)
• You can choose to either to repeat the image or not to repeat the image.
  “ntp_background_repeat”:  (“no-repeat”, “repeat”)
• You can choose between the two google chrome logos.
  “ntp_logo_alternate”:  (1 = white google chrome logo, 0 = colorful google chrome logo)

Step 4: Test Your Theme

At the top-right, click the 3 dots and then go to more tools –> extensions. From there turn on developer mode and load an unpacked extension. Choose your folder.