Chrome Theme ‎Design Documents: Create a theme

Discuss any Google Chrome Themes in this forum, including download, ideas or suggestions. You never know may be developed one day.

Chrome Theme ‎Design Documents: Create a theme

Postby Andrew on Sat Aug 08, 2009 1:33 am

Google released the design documents of Chrome theme since Chrome 3.0 beta, according the new specification, themes are packaged as extensions (click to see the extensions documentation for how to create and sign a CRX file). With the old way, the the developers must modify the default.dll file manually, it's very inconvenient.

Below is an example manifest.json file from dev.chromium.org:
Code: Select all
{
  "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"
    }
  }
}

Images
Image resources use paths relative to the root of the extension. You may override any IDR_THEME_* image specified in theme_resources.grd

Colors
Colors are specified in RGB. The full range of colors that can be specified can be read in browser_theme_provider.cc

Tints
Rather than letting you override buttons with images (which doesn't work across platforms, and is brittle in the case where we add new buttons. The full range of tints that can be specified can be read in browser_theme_provider.cc.

Tints are specified in HSL in floating-point numbers in the range 0-1.
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 may alternatively use '-1.0' for any of the HSL values to specify 'no change'.

Implementation

Themes are installed and packaged as extensions - once installed, the theme specification is copied into your browser preferences, allowing users to override individual theme choices. This theme data is loaded and managed by browser_theme_provider.cc (which also handles telling everyone to repaint when a theme is applied).

Theme provider

The theme provider has the following interface:

GetBitmapNamed(int id)

This wraps ResourceBundle::GetBitmapNamed and provides themed images if they exist, falling back to the default ResourceBundle images otherwise.

GetColor(int id)

Returns an SkColor with the specified ID (see the list of ids in browser_theme_provider.h)

Views Implementation

All views have access to a theme provider through their GetThemeProvider() method - this returns the root widget's theme provider. In browser-ui land, the theme provider hangs off the profile, and the root widget is profile aware.

In some cases, the root widget is not profile aware, and so you will have to inject the theme provider into the view. An example of this is tab_renderer.cc, which doesn't have access to the profile while in its dragged state.
User avatar
Andrew
Site Admin
 
Posts: 224
Joined: Sat Sep 13, 2008 7:20 pm

Return to Google Chrome Themes

Who is online

Users browsing this forum: No registered users and 1 guest

cron