Lightweight themes

Firefox 3.6 では、軽量テーマのネイティブサポートが追加されました。軽量テーマは、Mozilla Labs によって開発された Personas テーマを基にした、シンプルで簡単に作成できるテーマです。Personas 用に作成されていたテーマは、Firefox 3.6 に Personas アドオンをインストールしなくても使用できます。

Firefox 3 から 3.5 までのユーザは、Personas アドオンをインストールすることで軽量テーマを使用できます。

軽量テーマは 2 枚の画像で構成されています。一つはツールバーやアドレスバー、検索バー、タブバーがあるウィンドウ上部の背景、もう一つはステータスバーがあるウィンドウ下部の背景になります。

軽量テーマを作成するための詳しい情報は、Personas の作成手順を参照してください。

軽量テーマの変更通知

テーマ作者などが監視できるように、利用可能な軽量テーマのリストの変更や現在使用しているテーマの変更など、lightweight イベント関する変更が起こった時、いくつかの通知が送られます。詳細はテーマに関するオブザーバのリストを参照してください。

軽量テーマを自分のサイトで配布する

以下は、テーマを独自のサイトで配布するためのコードサンプルです。(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);">Third Planet テーマをインストール</button>
<button onclick="setTheme(this, 1, INSTALL);"
        onmouseover="setTheme(this, 1, PREVIEW);"
        onmouseout="setTheme(this, 1, RESET_PREVIEW);">Foxkeh Boom テーマをインストール</button>

なお、Firefox のホワイトリストにあなたのサイトを追加しない限り、マウスオーバーによるプレビューは動作しません。

Lightweight themes

軽量テーマの変更通知

軽量テーマを自分のサイトで配布する

参照

ドキュメントのタグと貢献者