1<h1 class="page_title">Themes</h1><p> 2A <em>theme</em> is a special kind of extension 3that changes the way the browser looks. 4Themes are <a href="packaging.html">packaged</a> like regular extensions, 5but they don't contain JavaScript or HTML code. 6</p> 7 8<p> 9You 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> 24Here is an example 25<a href="manifest.html"><code>manifest.json</code></a> 26file 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> 62Colors are in RGB format. 63To find the strings you can use within the "colors" field, 64look 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> 71Image resources use paths relative to the root of the extension. 72You 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>. 75Just remove the "IDR_" 76and convert the remaining characters to lowercase. 77For example, <code>IDR_THEME_NTP_BACKGROUND</code> 78(which <code>kThemeableImages</code> uses 79to specify the background of the new tab pane) 80corresponds to "theme_ntp_background". 81</p> 82 83<h3 id="properties">properties</h3> 84 85<p> 86This field lets you specify 87properties such as background alignment, 88background repeat, 89and an alternate logo. 90To 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> 98You can specify tints to be applied to parts of the UI 99such as buttons, the frame, and the background tab. 100Google Chrome supports tints, not images, 101because images don't work across platforms 102and are brittle in the case of adding new buttons. 103To find the strings you can use within the "tints" field, 104look 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> 109Tints are in Hue-Saturation-Lightness (HSL) format, 110using 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> 132You can alternatively use <code>-1.0</code> for any of the HSL values 133to specify <em>no change</em>. 134</p> 135 136 137<h2 id="moredoc"> Additional documentation </h2> 138 139<p> 140Community-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
