Extensions Docs Server: Doc conversion script

chrome/common/extensions/docs/server2/templates/articles/themes.html

Index: chrome/common/extensions/docs/server2/templates/articles/themes.html
diff --git a/chrome/common/extensions/docs/server2/templates/articles/themes.html b/chrome/common/extensions/docs/server2/templates/articles/themes.html
new file mode 100644
index 0000000000000000000000000000000000000000..d496ba76fcdad512f9380ecab302e8d152f41160
--- /dev/null
+++ b/chrome/common/extensions/docs/server2/templates/articles/themes.html
@@ -0,0 +1,147 @@
+<h1 class="page_title">Themes</h1><p>
+A <em>theme</em> is a special kind of extension
+that changes the way the browser looks.
+Themes are <a href="packaging.html">packaged</a> like regular extensions,
+but they don't contain JavaScript or HTML code.
+</p>
+
+<p>
+You can find and try a bunch of themes at the
+<a href="https://chrome.google.com/webstore/category/themes">Chrome Web Store</a>.
+</p>
+
+<img src="{{static}}/images/themes-1.gif"
+     width="100" height="80" alt="grassy theme" />
+
+<img src="{{static}}/images/themes-2.gif"
+     width="100" height="80" alt="dark theme" />
+
+<img src="{{static}}/images/themes-3.gif"
+     width="100" height="80" alt="foggy theme" />
+
+<h2 id="manifest"> Manifest </h2>
+<p>
+Here is an example
+<a href="manifest.html"><code>manifest.json</code></a>
+file for a theme:
+</p>
+
+
+
+<pre>
+{
+&nbsp;&nbsp;"version": "2.6",
+&nbsp;&nbsp;"name": "camo theme",
+<b>&nbsp;&nbsp;"theme": {
+&nbsp;&nbsp; &nbsp;"<a href="#images">images</a>" : {
+&nbsp;&nbsp; &nbsp; &nbsp;"theme_frame" : "images/theme_frame_camo.png",
+&nbsp;&nbsp; &nbsp; &nbsp;"theme_frame_overlay" : "images/theme_frame_stripe.png",
+&nbsp;&nbsp; &nbsp; &nbsp;"theme_toolbar" : "images/theme_toolbar_camo.png",
+&nbsp;&nbsp; &nbsp; &nbsp;"theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
+&nbsp;&nbsp; &nbsp; &nbsp;"theme_ntp_attribution" : "images/attribution.png"
+&nbsp;&nbsp; &nbsp;},
+&nbsp;&nbsp; &nbsp;"<a href="#colors">colors</a>" : {
+&nbsp;&nbsp; &nbsp; &nbsp;"frame" : [71, 105, 91],
+&nbsp;&nbsp; &nbsp; &nbsp;"toolbar" : [207, 221, 192],
+&nbsp;&nbsp; &nbsp; &nbsp;"ntp_text" : [20, 40, 0],
+&nbsp;&nbsp; &nbsp; &nbsp;"ntp_link" : [36, 70, 0],
+&nbsp;&nbsp; &nbsp; &nbsp;"ntp_section" : [207, 221, 192],
+&nbsp;&nbsp; &nbsp; &nbsp;"button_background" : [255, 255, 255]
+&nbsp;&nbsp; &nbsp;},
+&nbsp;&nbsp; &nbsp;"<a href="#tints">tints</a>" : {
+&nbsp;&nbsp; &nbsp; &nbsp;"buttons" : [0.33, 0.5, 0.47]
+&nbsp;&nbsp; &nbsp;},
+&nbsp;&nbsp; &nbsp;"<a href="#properties">properties</a>" : {
+&nbsp;&nbsp; &nbsp; &nbsp;"ntp_background_alignment" : "bottom"
+&nbsp;&nbsp; &nbsp;}
+&nbsp;&nbsp;}</b>
+}
+</pre>
+
+<h3 id="colors">colors</h3>
+
+<p>
+Colors are in RGB format.
+To find the strings you can use within the "colors" field,
+look for kColor* strings in
+<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/themes/theme_service.cc"><code>theme_service.cc</code></a>.
+</p>
+
+<h3 id="images">images</h3>
+
+<p>
+Image resources use paths relative to the root of the extension.
+You can override any of the images that are specified by
+<code>kThemeableImages</code> in
+<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/themes/theme_service.cc"><code>theme_service.cc</code></a>.
+Just remove the "IDR_"
+and convert the remaining characters to lowercase.
+For example, <code>IDR_THEME_NTP_BACKGROUND</code>
+(which <code>kThemeableImages</code> uses
+to specify the background of the new tab pane)
+corresponds to "theme_ntp_background".
+</p>
+
+<h3 id="properties">properties</h3>
+
+<p>
+This field lets you specify
+properties such as background alignment,
+background repeat,
+and an alternate logo.
+To see the properties and the values they can have, see
+<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/themes/theme_service.cc"><code>theme_service.cc</code></a>.
+
+</p>
+
+<h3 id="tints">tints</h3>
+
+<p>
+You can specify tints to be applied to parts of the UI
+such as buttons, the frame, and the background tab.
+Google Chrome supports tints, not images,
+because images don't work across platforms
+and are brittle in the case of adding new buttons.
+To find the strings you can use within the "tints" field,
+look for kTint* strings in
+<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/themes/theme_service.cc"><code>theme_service.cc</code></a>.
+</p>
+
+<p>
+Tints are in Hue-Saturation-Lightness (HSL) format,
+using floating-point numbers in the range 0 - 1.0:
+</p>
+
+<ul>
+  <li>
+    <b>Hue</b> is an absolute value, with 0 and 1 being red.
+  </li>
+  <li>
+    <b>Saturation</b> is relative to the currently provided image.
+    0.5 is <em>no change</em>,
+    0 is <em>totally desaturated</em>,
+    and 1 is <em>full saturation</em>.
+  </li>
+  <li>
+    <b>Lightness</b> is also relative,
+    with 0.5 being <em>no change</em>,
+    0 as <em>all pixels black</em>,
+    and 1 as <em>all pixels white</em>.
+  </li>
+</ul>
+
+<p>
+You can alternatively use <code>-1.0</code> for any of the HSL values
+to specify <em>no change</em>.
+</p>
+
+
+<h2 id="moredoc"> Additional documentation </h2>
+
+<p>
+Community-written documentation to help you write themes is here:
+</p>
+
+<blockquote>
+<a href="http://code.google.com/p/chromium/wiki/ThemeCreationGuide">http://code.google.com/p/chromium/wiki/ThemeCreationGuide</a>
+</blockquote>