Lightweight themes

Firefox 3.6 introduced native support for lightweight themes; these are simple, easy to create themes based on the Personas theming architecture developed by Mozilla Labs. Themes previously created for Personas can be used without installing the Personas add-on in Firefox 3.6.

Users of Firefox 3 through 3.5 can use lightweight themes by installing the Personas add-on.

Lightweight themes consist of two images: 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.

Refer to the Personas how to article for detailed information on creating a lightweight theme.

Lightweight theme notifications

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 this list for details.

Distributing lightweight themes on your own site

Here's a code snippet to self-host your themes. (Based on the test page that can be found at Bug 511771)

JavaScript:

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);
}

HTML:

<button onclick="setTheme(this, 0, INSTALL);"
        onmouseover="setTheme(this, 0, PREVIEW);"
        onmouseout="setTheme(this, 0, RESET_PREVIEW);">Install Third Planet Theme</button>
<button onclick="setTheme(this, 1, INSTALL);"
        onmouseover="setTheme(this, 1, PREVIEW);"
        onmouseout="setTheme(this, 1, RESET_PREVIEW);">Install Foxkeh Boom Theme</button>

Note that preview by mouseover doesn't work unless your site is added to the white list of Firefox.

Distributing lightweight themes as downloadable plugins (aka XPIs)

From within a BootstrapedPlugin's bootstrap.js, you can issue code similar to the following to install and activate a lightweight theme and uninstall it on plugin deactivation.

let lightweightTheme = {
    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"
};

Components.utils.import("resource://gre/modules/LightweightThemeManager.jsm");

function startup(data, reason) {
    LightweightThemeManager.themeChanged(lightweightTheme);
}
function shutdown(data, reason) {
    LightweightThemeManager.forgetUsedTheme(lightweightTheme.id);
}

See also

• lightweightthemes
• :-moz-lwtheme
• :-moz-lwtheme-brighttext
• :-moz-lwtheme-darktext
• Themes
• Personas
• Personas How To Guide
• API of the LightweightThemeManager