Home | History | Annotate | Download | only in articles 
      1 <h1 class="page_title">Themes</h1><p>
      2 A <em>theme</em> is a special kind of extension
      3 that changes the way the browser looks.
      4 Themes are <a href="packaging.html">packaged</a> like regular extensions,
      5 but they don't contain JavaScript or HTML code.
      6 </p>
      7 
      8 <p>
      9 You can find and try a bunch of themes at the
     10 <a href="https://chrome.google.com/webstore/category/themes">Chrome Web Store</a>.
     11 </p>
     12 
     13 <img src="{{static}}/images/themes-1.png"
     14      width="200" height="125" alt="green plants theme" />
     15 
     16 <img src="{{static}}/images/themes-2.png"
     17      width="200" height="125" alt="love smoke theme" />
     18 
     19 <img src="{{static}}/images/themes-3.png"
     20      width="200" height="125" alt="jus d'orange theme" />
     21 
     22 <h2 id="manifest"> Manifest </h2>
     23 <p>
     24 Here is an example
     25 <a href="manifest.html"><code>manifest.json</code></a>
     26 file for a theme:
     27 </p>
     28 
     29 <pre data-filename="manifest.json">
     30 {
     31   "version": "2.6",
     32   "name": "camo theme",
     33   <b>"theme": {
     34     "images" : {
     35       "theme_frame" : "images/theme_frame_camo.png",
     36       "theme_frame_overlay" : "images/theme_frame_stripe.png",
     37       "theme_toolbar" : "images/theme_toolbar_camo.png",
     38       "theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
     39       "theme_ntp_attribution" : "images/attribution.png"
     40     },
     41     "colors" : {
     42       "frame" : [71, 105, 91],
     43       "toolbar" : [207, 221, 192],
     44       "ntp_text" : [20, 40, 0],
     45       "ntp_link" : [36, 70, 0],
     46       "ntp_section" : [207, 221, 192],
     47       "button_background" : [255, 255, 255]
     48     },
     49     "tints" : {
     50       "buttons" : [0.33, 0.5, 0.47]
     51     },
     52     "properties" : {
     53       "ntp_background_alignment" : "bottom"
     54     }
     55   }</b>
     56 }
     57 </pre>
     58 
     59 <h3 id="colors">colors</h3>
     60 
     61 <p>
     62 Colors are in RGB format.
     63 To find the strings you can use within the "colors" field,
     64 look for kColor* strings in
     65 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/themes/theme_service.cc"><code>theme_service.cc</code></a>.
     66 </p>
     67 
     68 <h3 id="images">images</h3>
     69 
     70 <p>
     71 Image resources use paths relative to the root of the extension.
     72 You can override any of the images that are specified by
     73 <code>kThemeableImages</code> in
     74 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/themes/theme_service.cc"><code>theme_service.cc</code></a>.
     75 Just remove the "IDR_"
     76 and convert the remaining characters to lowercase.
     77 For example, <code>IDR_THEME_NTP_BACKGROUND</code>
     78 (which <code>kThemeableImages</code> uses
     79 to specify the background of the new tab pane)
     80 corresponds to "theme_ntp_background".
     81 </p>
     82 
     83 <h3 id="properties">properties</h3>
     84 
     85 <p>
     86 This field lets you specify
     87 properties such as background alignment,
     88 background repeat,
     89 and an alternate logo.
     90 To see the properties and the values they can have, see
     91 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/themes/theme_service.cc"><code>theme_service.cc</code></a>.
     92 
     93 </p>
     94 
     95 <h3 id="tints">tints</h3>
     96 
     97 <p>
     98 You can specify tints to be applied to parts of the UI
     99 such as buttons, the frame, and the background tab.
    100 Google Chrome supports tints, not images,
    101 because images don't work across platforms
    102 and are brittle in the case of adding new buttons.
    103 To find the strings you can use within the "tints" field,
    104 look for kTint* strings in
    105 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/themes/theme_service.cc"><code>theme_service.cc</code></a>.
    106 </p>
    107 
    108 <p>
    109 Tints are in Hue-Saturation-Lightness (HSL) format,
    110 using floating-point numbers in the range 0 - 1.0:
    111 </p>
    112 
    113 <ul>
    114   <li>
    115     <b>Hue</b> is an absolute value, with 0 and 1 being red.
    116   </li>
    117   <li>
    118     <b>Saturation</b> is relative to the currently provided image.
    119     0.5 is <em>no change</em>,
    120     0 is <em>totally desaturated</em>,
    121     and 1 is <em>full saturation</em>.
    122   </li>
    123   <li>
    124     <b>Lightness</b> is also relative,
    125     with 0.5 being <em>no change</em>,
    126     0 as <em>all pixels black</em>,
    127     and 1 as <em>all pixels white</em>.
    128   </li>
    129 </ul>
    130 
    131 <p>
    132 You can alternatively use <code>-1.0</code> for any of the HSL values
    133 to specify <em>no change</em>.
    134 </p>
    135 
    136 
    137 <h2 id="moredoc"> Additional documentation </h2>
    138 
    139 <p>
    140 Community-written documentation to help you write themes is here:
    141 </p>
    142 
    143 <blockquote>
    144 <a href="http://code.google.com/p/chromium/wiki/ThemeCreationGuide">http://code.google.com/p/chromium/wiki/ThemeCreationGuide</a>
    145 </blockquote>
    146