chrome/common/extensions/docs/static/themes.html

<div id="pageData-showTOC" class="pageData">true</div>

<p>
A <em>theme</em> is a special kind of extension
that changes the way the browser looks.
Themes are <a href="packaging.html">packaged</a> like regular extensions,
but they don't contain JavaScript or HTML code.
</p>

<p>
You can find and try a bunch of themes at the
<a href="https://tools.google.com/chrome/intl/en/themes/">themes gallery</a>.
</p>

<img src="images/themes-1.gif"
     width="100" height="80" alt="grassy theme" />

<img src="images/themes-2.gif"
     width="100" height="80" alt="dark theme" />

<img src="images/themes-3.gif"
     width="100" height="80" alt="foggy theme" />

<h2 id="manifest"> Manifest </h2>
<p>
Here is an example
<a href="manifest.html"><code>manifest.json</code></a>
file for a theme:
</p>

<!-- [PENDING: This page should eventually be (or point to) something that's very friendly to artists.  You should only have to look at one page to create a theme. -->

<pre>
{
&nbsp;&nbsp;"version": "2.6",
&nbsp;&nbsp;"name": "camo theme",
<b>&nbsp;&nbsp;"theme": {
&nbsp;&nbsp; &nbsp;"<a href="#images">images</a>" : {
&nbsp;&nbsp; &nbsp; &nbsp;"theme_frame" : "images/theme_frame_camo.png",
&nbsp;&nbsp; &nbsp; &nbsp;"theme_frame_overlay" : "images/theme_frame_stripe.png",
&nbsp;&nbsp; &nbsp; &nbsp;"theme_toolbar" : "images/theme_toolbar_camo.png",
&nbsp;&nbsp; &nbsp; &nbsp;"theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
&nbsp;&nbsp; &nbsp; &nbsp;"theme_ntp_attribution" : "images/attribution.png"
&nbsp;&nbsp; &nbsp;},
&nbsp;&nbsp; &nbsp;"<a href="#colors">colors</a>" : {
&nbsp;&nbsp; &nbsp; &nbsp;"frame" : [71, 105, 91],
&nbsp;&nbsp; &nbsp; &nbsp;"toolbar" : [207, 221, 192],
&nbsp;&nbsp; &nbsp; &nbsp;"ntp_text" : [20, 40, 0],
&nbsp;&nbsp; &nbsp; &nbsp;"ntp_link" : [36, 70, 0],
&nbsp;&nbsp; &nbsp; &nbsp;"ntp_section" : [207, 221, 192],
&nbsp;&nbsp; &nbsp; &nbsp;"button_background" : [255, 255, 255]
&nbsp;&nbsp; &nbsp;},
&nbsp;&nbsp; &nbsp;"<a href="#tints">tints</a>" : {
&nbsp;&nbsp; &nbsp; &nbsp;"buttons" : [0.33, 0.5, 0.47]
&nbsp;&nbsp; &nbsp;},
&nbsp;&nbsp; &nbsp;"<a href="#properties">properties</a>" : {
&nbsp;&nbsp; &nbsp; &nbsp;"ntp_background_alignment" : "bottom"
&nbsp;&nbsp; &nbsp;}
&nbsp;&nbsp;}</b>
}
</pre>

<h3 id="colors">colors</h3>

<p>
Colors are in RGB format.
To find the strings you can use within the "colors" field,
look for kColor* strings in
<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/browser_theme_provider.cc"><code>browser_theme_provider.cc</code></a>.
</p>

<h3 id="images">images</h3>

<p>
Image resources use paths relative to the root of the extension.
You can override any of the images that are specified by
<code>kThemeableImages</code> in
<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/browser_theme_provider.cc"><code>browser_theme_provider.cc</code></a>.
Just remove the "IDR_"
and convert the remaining characters to lowercase.
For example, <code>IDR_THEME_NTP_BACKGROUND</code>
(which <code>kThemeableImages</code> uses
to specify the background of the new tab pane)
corresponds to "theme_ntp_background".
</p>

<h3 id="properties">properties</h3>

<p>
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
<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/browser_theme_provider.cc"><code>browser_theme_provider.cc</code></a>.
<!-- [PENDING: We should flesh this out.] -->
</p>

<h3 id="tints">tints</h3>

<p>
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
<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/browser_theme_provider.cc"><code>browser_theme_provider.cc</code></a>.
</p>

<p>
Tints are in Hue-Saturation-Lightness (HSL) format,
using floating-point numbers in the range 0 - 1.0:
</p>

<ul>
  <li>
    <b>Hue</b> is an absolute value, with 0 and 1 being red.
  </li>
  <li>
    <b>Saturation</b> is relative to the currently provided image.
    0.5 is <em>no change</em>,
    0 is <em>totally desaturated</em>,
    and 1 is <em>full saturation</em>.
  </li>
  <li>
    <b>Lightness</b> is also relative,
    with 0.5 being <em>no change</em>,
    0 as <em>all pixels black</em>,
    and 1 as <em>all pixels white</em>.
  </li>
</ul>

<p>
You can alternatively use <code>-1.0</code> for any of the HSL values
to specify <em>no change</em>.
</p>


<h2 id="moredoc"> Additional documentation </h2>

<p>
Community-written documentation to help you write themes is here:
</p>

<blockquote>
<a href="http://code.google.com/p/chromium/wiki/ThemeCreationGuide">http://code.google.com/p/chromium/wiki/ThemeCreationGuide</a>
</blockquote>