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