| OLD | NEW |
|---|
| (Empty) | |
| 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/t
heme_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/t
heme_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/t
heme_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/t
heme_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> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 10832042:
Extensions Docs Server: Doc conversion script (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src