Lightweight themes

Firefox 3.6 introduit un support natif de thèmes légers; il est simple et facile à créer themes sur la base de l'architure des thèmes Personas développé par Mozilla Labs. Auparavant ces thèmes nécéssitait l'installation de l'extension Personas dans les versions antérieurs à Firefox 3.6.

Les utilisateur des versions de Firefox comprise entre 3 et 3.5 peuvent donc utiliser l'extension Personas.

Les thèmes légers sont faits à partir de deux images: Une pour la barre d'outils, la barre d'adresse, la barre de recherche et une seconde pour le fond des statuts et de la barre de recherche sur la page en bas de fenêtre.

Se référer à l'article Personas how to pour des informations plus détaillées sur la création d'un thème léger

Notification des thèmes légers

Plusieurs notifications sont envoyées pour permettre aux utilisateurs de savoir quels changement s'appliqueront , des changements allant de la liste des thèmes légers disponibles au changemment par rapport au thème utilisé. Voir cette liste pour plus de détails.

Distribuer vos thèmes légers sur votre propre site

Voici un exemple de code utilisable. (Basé sur la page test trouvable au 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>

Nota bene:

Cet aperçu avec 'mouseover', le survol par la souris ne marche pas avec les site ne figurant pas sur la liste blanche de Firefox.

Distribuer vos thèmes légers en tant qu'extensions téléchargeable (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);
}

A voir aussi

• lightweightthemes
• :-moz-lwtheme
• :-moz-lwtheme-brighttext
• :-moz-lwtheme-darktext
• Thèmes
• Personas
• Guide Personas How To
• API du LightweightThemeManager