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