theme

Typ Object
Pflicht Nein
Manifest-Version 2 oder höher
Beispiel
json
"theme": {
  "images": {
    "theme_frame": "images/sun.jpg"
  },
  "colors": {
    "frame": "#CF723F",
    "tab_background_text": "#000"
  }
}

Verwenden Sie den Schlüssel theme, um ein statisches Theme zu definieren, das auf Firefox angewendet werden soll.

Hinweis: Wenn Sie ein Theme mit einer Erweiterung einbinden möchten, siehe die theme API.

Hinweis: Seit Mai 2019 müssen Themes signiert sein, um installiert werden zu können (Firefox-Bug 1545109). Weitere Informationen finden Sie unter Signing and distributing your add-on.

Hinweis: Eine neue Version von Firefox für Android, basierend auf GeckoView, ist in Entwicklung. Eine Vorabversion ist verfügbar. Die Vorabversion unterstützt keine Themes.

Bildformate

Die folgenden Bildformate werden in allen Theme-Bildattributen unterstützt:

  • JPEG
  • PNG
  • APNG
  • SVG (animiertes SVG wird ab Firefox 59 unterstützt)
  • GIF (animiertes GIF wird nicht unterstützt)

Syntax

Der theme-Schlüssel ist ein Objekt, das die folgenden Attribute enthält:

Name Typ Beschreibung
images Object

Optional ab Firefox 60. Vor Firefox 60 obligatorisch.

Ein JSON-Objekt, dessen Eigenschaften die Bilder darstellen, die in verschiedenen Teilen des Browsers angezeigt werden. Siehe images für Details zu den Eigenschaften, die dieses Objekt enthalten kann.

colors Object

Obligatorisch.

Ein JSON-Objekt, dessen Eigenschaften die Farben verschiedener Teile des Browsers repräsentieren. Siehe colors für Details zu den Eigenschaften, die dieses Objekt enthalten kann.

properties Object

Optional

Dieses Objekt enthält Eigenschaften, die beeinflussen, wie die "additional_backgrounds"-Bilder angezeigt werden und Farbschemata angewendet werden. Siehe properties für Details zu den Eigenschaften, die dieses Objekt enthalten kann.

images

Alle URLs sind relativ zur manifest.json-Datei und können keine externe URL referenzieren.

Bilder sollten 200 Pixel hoch sein, um sicherzustellen, dass sie immer den Header-Bereich vertikal ausfüllen.

Name Typ Beschreibung
theme_frame String

Die URL eines Vordergrundbildes, das dem Kopfbereich hinzugefügt und an der oberen rechten Ecke des Kopfbereichs verankert wird.

Hinweis: Chrome verankert das Bild an der oberen linken Ecke des Headers und, falls das Bild den Header-Bereich nicht vollständig füllt, wird das Bild gekachelt.

Optional in Desktop-Firefox 60 und höher. Erforderlich in Firefox für Android.

additional_backgrounds Array von String

Warnung: Die additional_backgrounds-Eigenschaft ist experimentell. Sie wird zurzeit in den Release-Versionen von Firefox akzeptiert, aber ihr Verhalten kann sich ändern. Sie wird in Firefox für Android nicht unterstützt.

Ein Array von URLs für zusätzliche Hintergrundbilder, die dem Kopfbereich hinzugefügt und hinter dem "theme_frame":-Bild angezeigt werden. Diese Bilder schichten das erste Bild im Array oben, das letzte Bild im Array unten.

Optional.

Standardmäßig sind alle Bilder an der oberen rechten Ecke des Kopfbereichs verankert, aber ihre Ausrichtung und Wiederholverhalten können durch die Eigenschaften von "properties": gesteuert werden.

colors

Diese Eigenschaften definieren die Farben für verschiedene Teile des Browsers. Sie sind alle optional. Wie diese Eigenschaften die Firefox-Benutzeroberfläche beeinflussen, wird hier gezeigt:

Übersicht über die Farbeigenschaften und deren Anwendung auf Firefox-UI-Komponenten

Hinweis: Wo eine Komponente von mehreren Farbeigenschaften betroffen ist, sind die Eigenschaften in der Reihenfolge der Priorität aufgelistet.

Alle diese Eigenschaften können entweder als String, der einen gültigen CSS Farbstring enthält (einschließlich Hexadezimal), oder als RGB-Array, wie "tab_background_text": [ 107 , 99 , 23 ], angegeben werden.

Hinweis:>In Chrome können Farben nur als RGB-Arrays angegeben werden.

In Firefox für Android können Farben wie folgt angegeben werden:

  • vollständige hexadezimale Notation, d.h. nur #RRGGBB. alpha und verkürzte Syntax, wie in #RGB[A], werden nicht unterstützt.
  • Funktionale Notation (RGB-Arrays) für Themes, die Firefox 68.2 oder höher anvisieren.

Farben für Firefox für Android-Themes können nicht mit Farbnamen angegeben werden.

Name Beschreibung
bookmark_text

Die Farbe von Text und Symbolen in den Lesezeichen- und Suchleisten. Auch, wenn tab_text nicht definiert ist, wird die Farbe des aktiven Tabs gesetzt, und wenn icons nicht definiert ist, die Farbe der Symbolleisten-Icons. Bereitgestellt als Chrome-kompatibles Alias für toolbar_text.

Hinweis: Stellen Sie sicher, dass jede verwendete Farbe gut kontrastiert mit den Farben in frame und frame_inactive oder toolbar, wenn Sie diese Eigenschaft verwenden.

Wo icons nicht definiert ist, stellen Sie auch sicher, dass der Kontrast zu button_background_active und button_background_hover gut ist.

Beispiel ansehen
json
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "tab_text": "white",
    "toolbar": "black",
    "bookmark_text": "red"
  }
}

Browser Firefox ist schwarz. Der Tab des Browsers ist schwarz mit weißem Text. URL-Leiste und die Suchleiste auf der Seite sind weiß mit schwarzem Text, aber alle Symbole in den Browser- und Suchleisten sind rot.

button_background_active

Die Hintergrundfarbe der gedrückten Symbolleistenschaltflächen.

Beispiel ansehen
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "button_background_active": "red"
  }
}

Browser firefox ist schwarz. Tabliste und URL-Leiste des Browsers sind grau mit weißem Text. Das Symbol 'Symbolleiste anpassen' in der URL-Leiste ist weiß mit rotem Hintergrund, gedrückt, und ein Popup ist geöffnet, das eine kurze Liste von Dingen zeigt, die der Toolbar hinzugefügt werden können, wie die Bibliothek des Browsers und die Seitenleisten.
button_background_hover

Die Hintergrundfarbe der Symbolleistenschaltflächen im Hover-Zustand.

Beispiel ansehen
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "button_background_hover": "red"
  }
}

Browser firefox ist schwarz. Tabliste und URL-Leiste des Browsers sind grau mit weißem Text. Das Symbol 'Eine Seite zurückgehen' ist weiß mit einem roten Kreishintergrund.
icons

Die Farbe der Symbolleistensymbole, ausgenommen die Symbole in der Suchsymbolleiste.

Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit denen in frame, frame_inactive, button_background_active und button_background_hover kontrastiert.

Beispiel ansehen
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "icons": "red"
  }
}

Browser firefox ist schwarz. Tabliste und URL-Leiste des Browsers sind grau mit weißem Text. Die URL-Leiste und das Symbol 'Neue Registerkarte öffnen' sind rot. Die roten Symbole heben sich gut von der schwarzen Hintergrundfarbe des Header-Bereichs ab.
icons_attention

Die Farbe der Symbolleistensymbole im Aufmerksamkeitszustand, wie z.B. das gestreifte Lesezeichensymbol oder das fertige Download-Symbol.

Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit denen in frame, frame_inactive, button_background_active, und button_background_hover kontrastiert.

Beispiel ansehen
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "icons_attention": "red"
  }
}

Browser firefox ist schwarz. Tabliste und URL-Leiste des Browsers sind grau mit weißem Text. Das Symbol 'Diese Seite als Lesezeichen hinzufügen' ist rot und gedrückt, ein geöffnetes Popup mit der Aufschrift 'Dieses Lesezeichen bearbeiten' wird angezeigt. Während des Aufmerksamkeitszustands kontrastieren die Symbolleistensymbole gut mit der schwarzen Hintergrundfarbe des Header-Bereichs.
frame

Die Farbe des Hintergrunds des Header-Bereichs, angezeigt in dem Teil des Headers, der nicht von den in "theme_frame" und "additional_backgrounds" angegebenen Bildern abgedeckt ist oder sichtbar ist.

Beispiel ansehen
json
"theme": {
  "colors": {
     "frame": "red",
     "tab_background_text": "white"
  }
}

Browser firefox ist rot mit weißem Text. Die Tabs des Browsers sind heller Rot, auch mit weißem Text. Die URL-Leiste ist sehr hellrot mit schwarzem Text
frame_inactive

Die Farbe des Hintergrunds des Header-Bereichs, wenn das Browserfenster inaktiv ist, angezeigt in dem Teil des Headers, der nicht von den in "theme_frame" und "additional_backgrounds" angegebenen Bildern abgedeckt ist oder sichtbar ist.

Beispiel ansehen
json
"theme": {
  "colors": {
     "frame": "red",
     "frame_inactive": "gray",
     "tab_text": "white"
  }
}

Browser firefox ist grau. Die Tabs und die URL-Leiste des Browsers sind heller grau. Der Tabtext ist weiß und die URL-Leisten-Icons sind dunkler grau.

ntp_background

Die Hintergrundfarbe der neuen Tab-Seite.

Beispiel ansehen
json
"theme": {
  "colors": {
     "ntp_background": "red"
  }
}

Firefox zeigt eine neue Tab-Seite an. Der Hintergrund der Seite ist rot.
ntp_card_background

Die Hintergrundfarbe der Kärtchen auf der neuen Tab-Seite.

Beispiel ansehen
json
"theme": {
  "colors": {
     "ntp_card_background": "red"
  }
}

Firefox zeigt eine neue Tab-Seite an. Auf der Seite ist der Hintergrund zum Suchfeld und den Shortcut-Buttons rot.
ntp_text

Die Textfarbe der neuen Tab-Seite.

Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit der in ntp_background und ntp_card_background verwendeten Farbe kontrastiert.

Beispiel ansehen
json
"theme": {
  "colors": {
     "ntp_text": "red"
  }
}

Firefox zeigt eine neue Tab-Seite an. Auf der Seite ist der Text in Rot.
popup

Die Hintergrundfarbe von Popups (wie das Dropdown-Menü der URL-Leiste und die Pfeil-Panels).

Beispiel ansehen
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup": "red"
  }
}

Browser firefox ist schwarz. Die Tabs und die URL-Leiste des Browsers sind heller grau mit Icons und Text in Weiß. Das Symbol 'Diese Seite als Lesezeichen hinzufügen' ist blau und gedrückt, ein geöffnetes Popup mit der Aufschrift 'Dieses Lesezeichen bearbeiten' wird mit rotem Hintergrund angezeigt. Die Hintergrundfarbe des Popups ist rot.
popup_border

Die Randfarbe von Popups.

Beispiel ansehen
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup": "black",
     "popup_text": "white",
     "popup_border": "red"
  }
}

Browser firefox ist schwarz. Die Tabs und die URL-Leiste des Browsers sind heller grau mit Icons und Text in Weiß. Das Symbol 'Diese Seite als Lesezeichen hinzufügen' ist blau und gedrückt; ein geöffnetes Popup mit der Aufschrift 'Dieses Lesezeichen bearbeiten' wird mit rotem Rand und schwarzem Hintergrund angezeigt. Der Rand des Popups ist rot.
popup_highlight

Die Hintergrundfarbe von durch die Tastatur hervorgehobenen Elementen in Popups (wie das ausgewählte Dropdown-Element der URL-Leiste).

Hinweis: Es wird empfohlen, popup_highlight_text zu definieren, um die Standardtextfarbe des Browsers auf verschiedenen Plattformen zu überschreiben.

Beispiel ansehen
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup_highlight": "red",
     "popup_highlight_text": "white"
  }
}

Ein Screenshot von Firefox zeigt einen schwarzen Browser. Die Tabs und die URL-Leiste sind heller grau mit Icons und Text in Weiß. Ein Suchergebnis-Popup wird angezeigt mit dem Hintergrund eines hervorgehobenen Elements in Rot. Die Hintergrundfarbe des hervorgehobenen Elements im Popup ist rot.
popup_highlight_text

Die Textfarbe von hervorgehobenen Elementen in Popups.

Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit der in popup_highlight verwendeten Farbe kontrastiert.

Beispiel ansehen
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup_highlight": "black",
     "popup_highlight_text": "red"
  }
}

Browser firefox ist schwarz. Die Tabs und die URL-Leiste des Browsers sind heller grau mit Icons und Text in Weiß. Ein Suchergebnis-Popup wird angezeigt mit dem Text eines hervorgehobenen Elements in Rot mit schwarzem Hintergrund. Die Textfarbe des hervorgehobenen Elements kontrastiert gut mit der schwarzen Hintergrundfarbe dieses Elements.
popup_text

Die Textfarbe der Popups.

Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit der in popup verwendeten Farbe kontrastiert.

Beispiel ansehen
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup": "black",
     "popup_text": "red"
  }
}

Browser firefox ist schwarz. Die Tabs und die URL-Leiste des Browsers sind heller grau mit Icons und Text in Weiß. Ein Suchergebnis-Popup wird angezeigt mit Elementtexten in Rot. Die Textfarbe kontrastiert gut mit der schwarzen Hintergrundfarbe des Popups.
sidebar

Die Hintergrundfarbe der Seitenleiste.

Beispiel ansehen
json
"theme": {
  "colors": {
     "sidebar": "red",
     "sidebar_highlight": "white",
     "sidebar_highlight_text": "green",
     "sidebar_text": "white"
  }
}

Ein Nahaufnahme-Screenshot eines geöffneten Seitenleistenfensters des Browsers. Die Hintergrundfarbe der Seitenleiste ist rot.
sidebar_border

Die Rand- und Trennfarbeder Browserseitenleiste

Beispiel ansehen
json
"theme": {
  "colors": {
     "sidebar_border": "red"
  }
}

Eine Nahaufnahme der Lesezeichenseitenleiste des Firefox-Browsers mit einem roten horizontalen Separator zwischen dem Titelfeld der Seitenleiste und dem Seitenleistenmenü. Die Rand- und Trennfarbe der Seitenleiste ist rot.
sidebar_highlight

Die Hintergrundfarbe der hervorgehobenen Zeilen in eingebauten Seitenleisten

Beispiel ansehen
json
"theme": {
  "colors": {
     "sidebar_highlight": "red",
     "sidebar_highlight_text": "white"
  }
}

Ein Nahaufnahme der Lesezeichenseitenleiste des Firefox-Browsers mit einem hervorgehobenen Element. Die Hintergrundfarbe einer hervorgehobenen Zeile in der Seitenleiste ist rot mit weißem Text.
sidebar_highlight_text

Die Textfarbe der hervorgehobenen Zeilen in Seitenleisten.

Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit der in sidebar_highlight verwendeten Farbe kontrastiert.

Beispiel ansehen
json
"theme": {
  "colors": {
    "sidebar_highlight": "pink",
    "sidebar_highlight_text": "red",
  }
}

Eine Nahaufnahme der Lesezeichenseitenleiste des Firefox-Browsers mit einem hervorgehobenen Element. Die Farbe des Textes einer hervorgehobenen Zeile in der Seitenleiste ist rot. Die Textfarbe kontrastiert gut mit der rosa Hintergrundfarbe der hervorgehobenen Zeile.
sidebar_text

Die Textfarbe der Seitenleisten.

Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit der in sidebar verwendeten Farbe kontrastiert.

Beispiel ansehen
json
"theme": {
  "colors": {
     "sidebar": "red",
     "sidebar_highlight": "white",
     "sidebar_highlight_text": "green",
     "sidebar_text": "white"
  }
}

Ein Nahaufnahme-Screenshot eines geöffneten Seitenleistenfensters des Browsers. Die Farbe des Textes innerhalb der Seitenleiste ist weiß. Die Textfarbe kontrastiert gut mit dem roten Hintergrund der Seitenleiste.
tab_background_separator

Warnung: tab_background_separator wird ab Firefox 89 nicht unterstützt.

Die Farbe des senkrechten Separators der Hintergrund-Tabs.

Beispiel ansehen
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_background_separator": "red"
  }
}

Eine Nahaufnahme von Browser-Tabs, um den Separator hervorzuheben.

tab_background_text

Die Farbe des Textes, der in den inaktiven Tab-Seiten angezeigt wird. Wenn tab_text oder bookmark_text nicht angegeben ist, gilt es für den Text des aktiven Tabs.

Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit den in tab_selected oder frame und frame_inactive verwendeten Farben kontrastiert.

Beispiel ansehen
json
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "white",
    "tab_background_text": "red"
  }
}

Ein Screenshot eines Browserfensters mit einem geöffneten Tab. Der Browser ist schwarz. Die Tabs und die URL-Leiste des Browsers sind weiß mit roten Icons und rotem Text. Die Farbe des Textes im geöffneten Tab ist rot. Die Textfarbe kontrastiert gut mit der schwarzen Hintergrundfarbe des Tabs.
tab_line

Die Farbe der ausgewählten Tablinie.

Beispiel ansehen
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_line": "red"
  }
}

Browser firefox ist schwarz. Tabliste und URL-Leiste des Browsers sind dunkler grau mit hellgrauen Icons und weißem Text. Der ausgewählte Tab hat eine rote Umrandung.
tab_loading

Die Farbe des Ladesymbols des Tabs und des Ladebursts des Tabs.

Beispiel ansehen
json
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_loading": "red"
  }
}

Ein Screenshot eines Browserfensters mit einem geöffneten Tab. Der Browser ist schwarz. Die Tabs und die URL-Leiste des Browsers sind dunkler grau mit Icons und Text in weiß. Innerhalb des ausgewählten Tabs ist ein animiertes Ladesymbol rot.
tab_selected

Die Hintergrundfarbe des ausgewählten Tabs. Wenn sie nicht verwendet wird, wird die Farbe des ausgewählten Tabs durch frame und das frame_inactive festgelegt.

Beispiel ansehen
json
"theme": {
  "images": {
  "theme_frame": "weta.png"
},
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_selected": "red"
  }
}

Ein Screenshot eines Browserfensters mit einem geöffneten Tab. Der Browser ist schwarz. Die Tabs und die URL-Leiste des Browsers sind dunkler grau mit Icons und Text in weiß. Der ausgewählte Tab hat einen roten Hintergrund und weißen Text.
tab_text

Ab Firefox 59 stellt es die Textfarbe für den ausgewählten Tab dar. Wenn tab_line nicht angegeben ist, definiert es auch die Farbe der ausgewählten Tablinie.

Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit den in tab_selected oder frame und frame_inactive verwendeten Farben kontrastiert.

Beispiel ansehen
json
"theme": {
  "images": {
  "theme_frame": "weta.png"
},
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_selected": "white",
     "tab_text": "red"
  }
}

Browser firefox hat ein Bild eines Insekt-Themas. Die URL-Leiste ist heller grau mit weißen Icons. Der Text des ausgewählten Tabs ist rot mit weißem Hintergrund.
toolbar

Die Hintergrundfarbe für die Navigationsleiste, die Lesezeichenleiste und den ausgewählten Tab.

Dies legt auch die Hintergrundfarbe der "Suchen"-Leiste fest.

Beispiel ansehen
json
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "red",
    "tab_background_text": "white"
  }
}

Browser firefox ist schwarz. Die Tabs des Browsers, die Suchen-Leiste und die URL-Leiste sind rot mit weißem Text und Icons, außer für die Suchen-Leiste, wo der Text und das Icon schwarz sind.
toolbar_bottom_separator

Die Farbe der Linie, die den unteren Teil der Symbolleiste von dem Bereich darunter trennt.

Beispiel ansehen
json
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar_bottom_separator": "red"
  }
}

Browser firefox ist schwarz. Die Tabs und die URL-Leiste des Browsers sind heller grau mit weißem Text und Icons. Eine horizontale rote Linie trennt den unteren Teil der Symbolleiste und den Beginn der Darstellung der Webseite.
toolbar_field

Die Hintergrundfarbe für Felder in der Symbolleiste, wie die URL-Leiste.

Dies legt auch die Hintergrundfarbe des Suchen in Seite-Felds fest.

Beispiel ansehen
json
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar_field": "red"
  }
}

Browser firefox ist schwarz. Die Tabs des Browsers, die Suchen-Leiste und die URL-Leiste sind heller grau mit weißem Text und Icons. Die Hintergrundfarbe der URL-Leiste ist rot. Die Suchen-Leiste ist weiß mit schwarzem Text. Das Suchen-in-Seiten-Feld ist rot mit schwarzem Text.
toolbar_field_border

Die Randfarbe für Felder in der Symbolleiste.

Dies legt auch die Randfarbe des Suchen in Seite-Felds fest.

Beispiel ansehen
json
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_border": "red"
  }
}

Browser firefox ist schwarz. Die Tabs des Browsers, die Suchen-Leiste und die URL-Leiste sind schwarz mit weißem Text und Icons. Die URL-Leiste und die Such-in-Seiten-Felder sind rot umrandet.
toolbar_field_border_focus

Die fokussierte Randfarbe für Felder in der Symbolleiste.

Beispiel ansehen
json
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_border_focus": "red"
  }
}

Browser firefox ist schwarz. Die Tabs und die URL-Leiste des Browsers sind schwarz mit weißem Text und Icons. Das Feld der URL-Leiste ist fokussiert und mit rotem Rand versehen.
toolbar_field_focus

Die fokussierte Hintergrundfarbe für Felder in der Symbolleiste, wie die URL-Leiste.

Beispiel ansehen
json
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_focus": "red"
  }
}

Browser firefox ist schwarz. Die Tabs des Browsers, die Suchen-Leiste und die URL-Leiste sind schwarz mit weißem Text und Icons. Die Hintergrundfarbe der fokussierten URL-Leiste ist rot und der Text ist weiß.
toolbar_field_highlight Die Hintergrundfarbe, die verwendet wird, um die aktuelle Auswahl des Textes in der URL-Leiste (und der Suchleiste, wenn sie als separate Box konfiguriert ist) anzuzeigen.
Beispiel ansehen
json
"theme": {
  "colors": {
    "toolbar_field": "rgb(255 255 255 / 91%)",
    "toolbar_field_text": "rgb(0 100 0)",
    "toolbar_field_highlight": "rgb(180 240 180 / 90%)",
    "toolbar_field_highlight_text": "rgb(0 80 0)"
  }
}

Browser firefox ist weiß. Die Tabs und die URL-Leiste des Browsers sind weiß mit Text und Icons in Schwarz. Das Feld der URL-Leiste ist fokussiert und blau umrandet und der Text der URL-Leiste ist ausgewählt.

Hier gibt das Feld toolbar_field_highlight an, dass die Highlight-Farbe ein helles Grün ist, während der Text auf ein dunkel-mittelgrün mit toolbar_field_highlight_text gesetzt ist.

toolbar_field_highlight_text

Die Farbe, die verwendet wird, um den aktuell ausgewählten Text in der URL-Leiste (und der Suchleiste, wenn sie als separate Box konfiguriert ist) anzuzeigen.

Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit den in toolbar_field_highlight verwendeten Farben kontrastiert.

Beispiel ansehen
json
"theme": {
  "colors": {
    "toolbar_field": "rgb(255 255 255 / 91%)",
    "toolbar_field_text": "rgb(0 100 0)",
    "toolbar_field_highlight": "rgb(180 240 180 / 90%)",
    "toolbar_field_highlight_text": "rgb(0 80 0)"
  }
}

Browser firefox ist weiß. Die Tabs und die URL-Leiste des Browsers sind weiß mit Text und Icons in Schwarz. Das Feld der URL-Leiste ist fokussiert und blau umrandet und der Text der URL-Leiste ist ausgewählt.

Hier wird das Feld toolbar_field_highlight_text verwendet, um die Textfarbe auf ein dunkel-mittelgrün zu setzen, während die Highlight-Farbe ein helles Grün ist.

toolbar_field_separator

Warnung: toolbar_field_separator wird ab Firefox 89 nicht unterstützt.

Die Farbe der Separatoren in der URL-Leiste. In Firefox 58 wurde dies als toolbar_vertical_separator implementiert.

Beispiel ansehen
json
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field_separator": "red"
  }
}

Ein Screenshot eines Browserfensters mit einem geöffneten Tab. Browser firefox ist schwarz. Die Tabs und die URL-Leiste des Browsers sind schwarz mit Text und Icons in Weiß. Innerhalb des weißen URL-Leistenfeldes, nach dem Leseansichtssymbol eine rote vertikale Linie, die die restlichen URL-Leistenicons trennt. Die Farbe der vertikalen Trennungslinie innerhalb der URL-Leiste ist rot.

In diesem Screenshot ist "toolbar_vertical_separator" die rote vertikale Linie in der URL-Leiste, die das Reader-Modus-Symbol von den anderen Symbolen trennt.

toolbar_field_text

Die Farbe des Textes in Feldern in der Symbolleiste, wie die URL-Leiste. Dies legt auch die Farbe der Textes im Suchen in Seite-Feld fest.

Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit den in toolbar_field verwendeten Farben kontrastiert.

Beispiel ansehen
json
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "red"
  }
}

Ein Screenshot eines Browserfensters mit einem geöffneten Tab. Der Browser ist schwarz. Die Tabs und die URL-Leiste des Browsers sind schwarz mit weißem Text und Icons. Der Text innerhalb der URL-Leiste ist rot. Die Icons und das Such-in-Seiten-Feld haben rote Buchstaben mit schwarzem Hintergrund.
toolbar_field_text_focus

Die Farbe des Textes in fokussierten Feldern in der Symbolleiste, wie die URL-Leiste.

Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit den in toolbar_field_focus verwendeten Farben kontrastiert.

Beispiel ansehen
json
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_text_focus": "red"
  }
}

Ein Screenshot eines Browserfensters mit zwei geöffneten Tabs. Der Browser ist schwarz. Die Tabs und die URL-Leiste des Browsers sind schwarz mit Text und Icons in Weiß. Die URL-Leiste hat den Fokus; der Text und die Icons der Leiste sind rot mit schwarzem Hintergrund.
toolbar_text

Die Farbe des Textes in der Symbolleiste. Dies legt auch die Farbe des Textes in der "Suchen"-Leiste fest.

Hinweis: Für die Kompatibilität mit Chrome verwenden Sie das Alias bookmark_text.

Beispiel ansehen
json
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar": "black",
    "toolbar_text": "red"
  }
}

Ein Screenshot eines Browserfensters mit einem geöffneten Tab. Der Browser ist schwarz. Die Tabs, die Suchen-Leiste und die URL-Leiste des Browsers sind schwarz mit rotem Text und Icons. Der Text innerhalb des aktiven Tabs, der Navigationsleiste und der Suchleiste ist rot.
toolbar_top_separator

Die Farbe der Linie, die den oberen Teil der Symbolleiste von darüber liegenden Bereichen trennt.

Beispiel ansehen
json
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar": "black",
    "toolbar_top_separator": "red"
  }
}

Ein Screenshot eines Browserfensters mit einem geöffneten Tab. Der Browser ist schwarz. Die Tabs und die URL-Leiste des Browsers sind schwarz mit weißem Text und Icons. Eine rote Linie trennt den oberen Teil der URL-Leiste vom Browser.
toolbar_vertical_separator

Die Farbe des Separators in der Lesezeichensymbolleiste. In Firefox 58 entspricht sie der Farbe der Separatoren in der URL-Leiste.

Beispiel ansehen
json
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar": "black",
    "toolbar_vertical_separator": "red"
  }
}

Ein Screenshot eines Browserfensters mit einem geöffneten Tab. Der Browser ist schwarz. Die Tabs und die URL-Leiste des Browsers sind schwarz mit Text und Icons in Weiß. Die Farbe der vertikalen Linie, die die Lesezeichensymbolleiste vom rechten Inhalt trennt, ist rot.

Aliase

Zusätzlich akzeptiert dieser Schlüssel verschiedene Eigenschaften, die Aliase für eine der oben genannten Eigenschaften sind. Diese werden für die Kompatibilität mit Chrome bereitgestellt. Wenn ein Alias angegeben ist und die Nicht-Alias-Version ebenfalls angegeben ist, wird der Wert aus der Nicht-Alias-Version übernommen.

Name Alias für
bookmark_text toolbar_text

properties

Name Typ Beschreibung
additional_backgrounds_alignment

Array von String

Optional

Ein Array von Enumerationswerten, die die Ausrichtung des entsprechenden "additional_backgrounds":-Array-Elements definieren.
Die Ausrichtungsoptionen umfassen:

  • "bottom"
  • "center"
  • "left"
  • "right"
  • "top"
  • "center bottom"
  • "center center"
  • "center top"
  • "left bottom"
  • "left center"
  • "left top"
  • "right bottom"
  • "right center"
  • "right top".

Wenn nicht angegeben, wird standardmäßig "right top" verwendet.
additional_backgrounds_tiling

Array von String

Optional

Ein Array von Enumerationswerten, die definieren, wie das entsprechende "additional_backgrounds":-Array-Element wiederholt wird. Optionen umfassen:

  • "no-repeat"
  • "repeat"
  • "repeat-x"
  • "repeat-y"

Wenn nicht angegeben, wird standardmäßig "no-repeat" verwendet.
color_scheme

String

Optional

Bestimmt welches Farbschema auf die Chrome (zum Beispiel, Kontextmenüs) und Inhalte (zum Beispiel, eingebaute Seiten und das bevorzugte Farbschema für Webseiten) angewendet wird. Optionen umfassen:

  • "auto" – ein helles oder dunkles Schema basierend automatisch auf dem Theme.
  • "light" – ein helles Schema.
  • "dark" – ein dunkles Schema.
  • "system" – verwendet das System-Schema.

Wenn nicht angegeben, wird standardmäßig "auto" verwendet.
content_color_scheme

String

Optional

Bestimmt welches Farbschema auf die Inhalte (zum Beispiel, eingebaute Seiten und bevorzugte Farbschema für Webseiten) angewendet wird. Überschreibt color_scheme. Optionen umfassen:

  • "auto" – ein helles oder dunkles Schema basierend automatisch auf dem Theme.
  • "light" – ein helles Schema.
  • "dark" – ein dunkles Schema.
  • "system" – das System-Schema.

Wenn nicht angegeben, wird standardmäßig "auto" verwendet.

Beispiele

Ein einfaches Theme muss ein Bild definieren, das dem Header hinzugefügt wird, die Akzentfarbe, die im Header verwendet wird, und die Farbe des im Header verwendeten Textes:

json
 "theme": {
   "images": {
     "theme_frame": "images/sun.jpg"
   },
   "colors": {
     "frame": "#CF723F",
     "tab_background_text": "#000"
   }
 }

Mehrere Bilder können verwendet werden, um den Header zu füllen. Vor Firefox-Version 60 verwenden Sie ein leeres oder transparentes Header-Bild, um die Platzierung jedes zusätzlichen Bildes zu kontrollieren:

json
 "theme": {
   "images": {
     "additional_backgrounds": [ "images/left.png", "images/middle.png", "images/right.png"]
   },
   "properties": {
     "additional_backgrounds_alignment": [ "left top", "top", "right top"]
   },
   "colors": {
     "frame": "blue",
     "tab_background_text": "#ffffff"
   }
 }

Sie können auch den Header mit einem wiederholten Bild oder Bildern füllen, in diesem Fall ein einzelnes Bild, das oben in der Mitte des Headers verankert ist und über den Rest des Headers wiederholt wird:

json
 "theme": {
   "images": {
     "additional_backgrounds": [ "images/logo.png"]
   },
   "properties": {
     "additional_backgrounds_alignment": [ "top" ],
     "additional_backgrounds_tiling": [ "repeat"  ]
   },
   "colors": {
     "frame": "green",
     "tab_background_text": "#000"
   }
 }

Das folgende Beispiel verwendet die meisten der verschiedenen Werte für theme.colors:

json
  "theme": {
    "images": {
      "theme_frame": "weta.png"
    },

    "colors": {
       "frame": "darkgreen",
       "tab_background_text": "white",
       "toolbar": "blue",
       "bookmark_text": "cyan",
       "toolbar_field": "orange",
       "toolbar_field_border": "white",
       "toolbar_field_text": "green",
       "toolbar_top_separator": "red",
       "toolbar_bottom_separator": "white",
       "toolbar_vertical_separator": "white"
    }
  }

Es wird Ihnen einen Browser geben, der so aussieht:

Ein Browserfenster mit zwei geöffneten Tabs und dunkelgrüner Hintergrundfarbe im Headerbereich. Der inaktive Tab hat eine weiße Textfarbe. Der aktive Tab und die Symbolleiste haben eine blaue Hintergrundfarbe mit türkiser Textfarbe. Die URL-Leiste hat einen orangen Hintergrund mit weißen Rändern, eine grüne Textfarbe und eine weiße vertikale Trennlinie. Eine rote Linie trennt die Tabs oben und eine weiße Linie trennt die Tabs vom darunter liegenden Inhalt.

In diesem Screenshot ist "toolbar_vertical_separator" die weiße vertikale Linie in der URL-Leiste, die das Reader-Modus-Symbol von den anderen Symbolen trennt.

Browser-Kompatibilität

Chrome-Kompatibilität

In Chrome:

  • colors/toolbar_text wird nicht verwendet, stattdessen colors/bookmark_text verwenden.

  • images/theme_frame verankert das Bild oben links im Header und wenn das Bild den Headerbereich nicht füllt, wird das Bild gekachelt.

  • Alle Farben müssen als ein Array von RGB-Werten angegeben werden, wie folgt:

    json
    "theme": {
  "colors": {
     "frame": [255, 0, 0],
     "tab_background_text": [0, 255, 0],
     "bookmark_text": [0, 0, 255]
  }
}

    Ab Firefox 59 werden sowohl die Array-Form als auch die CSS-Farbe-Form für alle Eigenschaften akzeptiert. Zuvor erforderten colors/frame und colors/tab_background_text die Array-Form, während andere Eigenschaften die CSS-Farbe-Form erforderten.