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