Themes

A theme is a special kind of extension that changes the way the browser looks. Themes are packaged like regular extensions, but they don't contain JavaScript or HTML code.

You can find and try a bunch of themes at the Chrome Web Store.

green plants theme love smoke theme jus d'orange theme

Manifest

Here is an example manifest.json file for a theme: 

{
  "version": "2.6",
  "name": "camo theme",
  "theme": {
    "images" : {
      "theme_frame" : "images/theme_frame_camo.png",
      "theme_frame_overlay" : "images/theme_frame_stripe.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"
    }
  }
}

colors

Colors are in RGB format. To find the strings you can use within the "colors" field, look for kColor* strings in theme_service.cc.

images

Image resources use paths relative to the root of the extension. You can override any of the images that are specified by kThemeableImages in theme_service.cc. Just remove the "IDR_" and convert the remaining characters to lowercase. For example, IDR_THEME_NTP_BACKGROUND (which kThemeableImages uses to specify the background of the new tab pane) corresponds to "theme_ntp_background".

properties

This field lets you specify properties such as background alignment, background repeat, and an alternate logo. To see the properties and the values they can have, see theme_service.cc.

tints

You can specify tints to be applied to parts of the UI such as buttons, the frame, and the background tab. Google Chrome supports tints, not images, because images don't work across platforms and are brittle in the case of adding new buttons. To find the strings you can use within the "tints" field, look for kTint* strings in theme_service.cc.

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.

Additional documentation

Community-written documentation to help you write themes is here:

http://code.google.com/p/chromium/wiki/ThemeCreationGuide