Online Google Chrome Theme Creator

Where can I learn how to create a Chrome theme?

Themes ( From Google Code )

Theme Creation Guide

Chrome Theme Reference

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 fles: 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" uses to specify the background of the new tab pane.

colors: Colors are in RGB format, which is 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 the people who are unfamiliar with the .json file. It provide 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.

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

- See more at: https://www.themebeta.com/chrome-theme-creator-online.html#sthash.czTgSWNO.dpuf