Online Google Chrome Theme Creator
How to remove Chrome themes?
At the top right of Chrome, click More and then Settings.
Under "Appearance," click Reset to default. You'll see the classic Google Chrome theme again.
What is the recommended size for each image?
- theme_frame: ∞ x 30px
- theme_toolbar: ∞ x 120px
- theme_tab_background: ∞ x 65px
- theme_ntp_background: Recommended Minimum Size for images 800 x 600px
- theme_frame_overlay: 1100 x 40px
- theme_button_background: 30 x 30px
Where can I learn how to create a Chrome theme?
What is a theme?
A theme is a special kind of extension that changes the way the Google Chrome browser looks. It is a zipped bundle of files: one manifest.json file and several PNG images.
Here is an example manifest.json file for a theme:
{
"version": "1.0",
"name": "test theme",
"description": "A test theme",
"theme": {
"images": {
"theme_frame": "images/theme_frame_camo.png",
"theme_toolbar": "images/theme_toolbar_camo.png",
"theme_ntp_background": "images/theme_ntp_background_norepeat.png",
"theme_ntp_attribution": "images/attribution.png"
},
"colors": {
"frame": [71, 105, 91],
"toolbar": [207, 221, 192],
"ntp_text": [20, 40, 0],
"ntp_link": [36, 70, 0],
"ntp_section": [207, 221, 192],
"button_background": [255, 255, 255]
},
"tints": {
"buttons": [0.33, 0.5, 0.47]
},
"properties": {
"ntp_background_alignment": "bottom"
}
}
}
- version: One to four dot-separated integers identifying the version of this theme.
- name: A short, plain text string (no more than 45 characters) that identifies the theme.
- description: A description text for your theme.
- images: Image resources for this theme. For example, "theme_ntp_background" specifies the background of the new tab pane.
- colors: Colors are in RGB format, used to specify the color of the bookmark text, frame, etc.
- tints: You can specify tints to be applied to parts of the UI such as buttons, the frame, and the background tab.
Tints are in Hue-Saturation-Lightness (HSL) format, using floating-point numbers in the range 0 - 1.0:
-
Hue is an absolute value, with 0 and 1 being red.
-
Saturation is relative to the currently provided image. 0.5 is no change, 0 is totally desaturated, and 1 is full saturation.
-
Lightness is also relative, with 0.5 being no change, 0 as all pixels black, and 1 as all pixels white. You can alternatively use -1.0 for any of the HSL values to specify no change.
-
properties: This field lets you specify properties such as background alignment, background repeat.
What is this online chrome theme creator?
The online Chrome theme creator is a simple theme maker tool for people who are unfamiliar with the .json file. It provides a simple way to change images, choose colors and tints, preview, and pack your Chrome theme online.
What kind of images can I use?
We recently support both PNG and JPG images. PNG images are recommended.