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