Revision 487443 of Lightweight themes

<p>{{ gecko_minversion_header("1.9.2") }}</p>
<p>{{ warning("The article mentions the old name (”Persona“) for Lightweight Themes. Today, Mozilla's distributed credential system (internal name: BrowserID) is called Persona. This article needs to be updated to reflect these changes.") }}</p>
<p>Firefox 3.6 introduced native support for lightweight themes; these are simple, easy to create themes based on the <a class="external" href="https://www.getpersonas.com/" title="https://www.getpersonas.com/">Personas</a> theming architecture developed by Mozilla Labs. Themes previously created for Personas can be used without installing the Personas add-on in Firefox 3.6.</p>
<p>Users of Firefox 3 through 3.5 can use lightweight themes by installing the <a class="link-https" href="https://addons.mozilla.org/firefox/downloads/latest/10900" title="https://addons.mozilla.org/firefox/downloads/latest/10900">Personas add-on</a>.</p>
<p>Lightweight themes consist of two images:&nbsp;one that is used as the background for the tool bars, address bar, search bar, and tab strip, and a second image that's used as the background for the status and find bars at the bottom of the window.</p>
<p>Refer to the <a class="external" href="https://www.getpersonas.com/en-US/demo_create" title="https://www.getpersonas.com/en-US/demo_create">Personas how to article</a> for detailed information on creating a lightweight theme.</p>
<h2 id="Lightweight_theme_notifications">Lightweight theme notifications</h2>
<p>Several notifications are sent to allow interested parties to observe when changes occur related to lightweight events, including changes to the list of available lightweight themes as well as changes to the currently-used lightweight theme. See <a href="/en/Observer_Notifications#Themes" title="en/Observer Notifications#Themes">this list</a> for details.</p>
<h2 id="Distributing_lightweight_themes_on_your_own_site">Distributing lightweight themes on your own site</h2>
<p>Here's a code snippet to self-host your themes. (Based on the test page that can be found at <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=511771">Bug 511771</a>)</p>
<p>JavaScript:</p>
<pre class="brush: js">
var themes = [
  {
    id: "example-01",
    name: "Third Planet",
    headerURL: "https://www.example.com/firefox/personas/01/header.jpg",
    footerURL: "https://www.example.com/firefox/personas/01/footer.jpg",
    textcolor: "#fff",
    accentcolor: "#6b6b6b"
  },
  {
    id: "example-02",
    name: "Foxkeh Boom",
    headerURL: "https://www.example.com/firefox/personas/02/header.jpg",
    footerURL: "https://www.example.com/firefox/personas/02/footer.jpg",
    textcolor: "#bcf",
    accentcolor: "#8888FF"
  }
];

const INSTALL = "InstallBrowserTheme";
const PREVIEW = "PreviewBrowserTheme";
const RESET_PREVIEW = "ResetBrowserThemePreview";

function setTheme(node, theme, action) {
  node.setAttribute("data-browsertheme", JSON.stringify(themes[theme]));
  var event = document.createEvent("Events");
  event.initEvent(action, true, false);
  node.dispatchEvent(event);
}</pre>
<p>HTML:</p>
<pre class="brush: html">
&lt;button onclick="setTheme(this, 0, INSTALL);"
        onmouseover="setTheme(this, 0, PREVIEW);"
        onmouseout="setTheme(this, 0, RESET_PREVIEW);"&gt;Install Third Planet Theme&lt;/button&gt;
&lt;button onclick="setTheme(this, 1, INSTALL);"
        onmouseover="setTheme(this, 1, PREVIEW);"
        onmouseout="setTheme(this, 1, RESET_PREVIEW);"&gt;Install Foxkeh Boom Theme&lt;/button&gt;
</pre>
<p>Note that preview by mouseover doesn't work unless your site is added to the white list of Firefox.</p>
<h2 id="See_also">See also</h2>
<ul>
 <li>{{ XULAttr("lightweightthemes") }}</li>
 <li>{{ CSSXRef(":-moz-lwtheme") }}</li>
 <li>{{ CSSXRef(":-moz-lwtheme-brighttext") }}</li>
 <li>{{ CSSXRef(":-moz-lwtheme-darktext") }}</li>
 <li><a href="/en/Themes" title="en/Themes">Themes</a></li>
 <li><a class="external" href="https://www.getpersonas.com/en-US/" title="https://www.getpersonas.com/en-US/">Personas</a></li>
 <li><a class="external" href="https://www.getpersonas.com/en-US/demo_create" title="https://www.getpersonas.com/en-US/demo_create">Personas How To Guide</a></li>
</ul>
<div class="noinclude">
 <p>{{ languages( { "ja": "ja/Themes/Lightweight_themes" } ) }}</p>
</div>
<p>&nbsp;</p>