theme

Typ Object
Erforderlich Nein
Manifestversion 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 Thema zu definieren, das auf Firefox angewendet werden soll.

Hinweis: Wenn Sie ein Thema in eine Erweiterung einbinden möchten, siehe die theme API.

Hinweis: Seit Mai 2019 müssen Themen signiert sein, um installiert werden zu können (Firefox bug 1545109). Einzelheiten finden Sie unter Signieren und Verteilen Ihres Add-ons.

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

Bildformate

Die folgenden Bildformate werden in allen Themeneigenschaften unterstützt:

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

Syntax

Der theme-Schlüssel ist ein Objekt, das die folgenden Eigenschaften annimmt:

Name Typ Beschreibung
images Object

Optional ab Firefox 60. Erforderlich vor Firefox 60.

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

colors Object

Erforderlich.

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

properties Object

Optional

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

Bilder

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 den Header-Bereich immer vertikal ausfüllen.

Name Typ Beschreibung
theme_frame String

Die URL eines Vordergrundbildes, das zum Header-Bereich hinzugefügt werden soll und an der oberen rechten Ecke des Header-Bereichs verankert wird.

Hinweis: Chrome verankert das Bild an der oberen linken Seite des Headers und wenn das Bild den Header-Bereich nicht ausfüllt, wird das Bild gekachelt.

Optional in Desktop-Firefox ab Version 60. Erforderlich in Firefox für Android.

additional_backgrounds Array von String

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

Ein Array von URLs für zusätzliche Hintergrundbilder, die dem Header-Bereich hinzugefügt und hinter dem "theme_frame":-Bild angezeigt werden sollen. 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 Header-Bereichs verankert, ihre Ausrichtung und Wiederholverhalten kann aber durch Eigenschaften von "properties": gesteuert werden.

Farben

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

Übersicht über die Farbeingenschaften und ihre Anwendung auf Firefox-UI-Komponenten

Hinweis: Wenn eine Komponente von mehreren Farbeigenschaften beeinflusst wird, sind die Eigenschaften in der Reihenfolge der Vorrangigkeit aufgeführt.

Alle diese Eigenschaften können entweder als String mit einem beliebigen gültigen CSS-Farbestring (einschließlich Hexadezimalwerten) oder einem RGB-Array angegeben werden, wie z.B. "tab_background_text": [ 107 , 99 , 23 ].

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

In Firefox für Android können Farben mit folgenden Angaben spezifiziert werden:

  • vollständige Hexadezimalschreibweise, das heißt nur #RRGGBB. alpha und verkürzte Syntax, wie in #RGB[A], werden nicht unterstützt.
  • Funktionale Notation (RGB-Arrays) für Themen, die auf Firefox 68.2 oder später abzielen.

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

Name Beschreibung
bookmark_text

Die Farbe von Text und Icons in den Lesezeichen- und Suchleisten. Wenn tab_text nicht definiert ist, setzt er auch die Farbe des aktiven Tab-Texts und wenn icons nicht definiert ist, die Farbe der Toolbar-Icons. Bereitgestellt als Chrome-kompatibles Alias für toolbar_text.

Hinweis: Stellen Sie sicher, dass jede verwendete Farbe gut mit denen übereinstimmt, die in frame und frame_inactive oder toolbar verwendet werden, wenn Sie diese Eigenschaft nutzen.

Wo icons nicht definiert ist, stellen Sie auch sicher, dass ein guter Kontrast zu button_background_active und button_background_hover besteht.

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

Firefox-Browser ist schwarz. Die Registerkarte des Browsers ist schwarz mit weißem Text. Die URL-Leiste und die Suchleiste sind weiß mit schwarzem Text, aber alle Symbole der Browser und der Suchleiste sind rot.

button_background_active

Die Farbe des Hintergrunds der gedrückten Toolbar-Buttons.

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

Der Firefox-Browser ist schwarz. Die Registerkarten und die URL-Leiste des Browsers sind grau mit weißem Text. Das Symbol zum Anpassen der Toolbar in der URL-Leiste in weiß mit rotem Hintergrund ist gedrückt, und ein Popup wird geöffnet, das eine kurze Liste von Elemente anzeigt, die zur Toolbar hinzugefügt werden können, wie zum Beispiel die Bibliothek des Browsers und die Seitenleisten.

button_background_hover

Die Farbe des Hintergrunds der Toolbar-Buttons beim Schweben.

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

Der Firefox-Browser ist schwarz. Die Registerkarten und die URL-Leiste des Browsers sind grau mit weißem Text. Das Symbol 'Eine Seite zurück' ist weiß mit einem roten Kreis im Hintergrund.

icons

Die Farbe der Toolbar-Icons, ausgenommen die in der Suchleiste.

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"
  }
}

Der Firefox-Browser ist schwarz. Die Registerkarten und die URL-Leiste des Browsers sind grau mit weißem Text. Die URL-Leiste und das Öffnen eines neuen Tab-Symbols sind rot. Die roten Symbole kontrastieren gut mit dem schwarzen Hintergrund des Headerbereichs.

icons_attention

Die Farbe von Toolbar-Icons im Aufmerksamkeitsstatus, wie zum Beispiel das markierte Lesezeichen-Symbol oder das abgeschlossene 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"
  }
}

Der Firefox-Browser ist schwarz. Die Registerkarten und die URL-Leiste des Browsers sind grau mit weißem Text. Das Symbol 'Diese Seite bookmarken' ist rot und gedrückt, ein geöffnetes Popup namens 'Dieses Lesezeichen bearbeiten' wird angezeigt. Während im Aufmerksamkeitsstatus die Toolbar-Icons gut mit dem schwarzen Hintergrund des Headerbereichs kontrastieren.

frame

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

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

Der Firefox-Browser ist rot mit weißem Text. Die Registerkarten des Browsers sind hellrot, ebenfalls mit weißem Text. Die URL-Leiste ist sehr hellrot mit schwarzem Text.

frame_inactive

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

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

Der Firefox-Browser ist grau. Die Registerkarten und die URL-Leiste des Browsers sind heller grau. Der Tab-Text ist weiß und die Symbole der URL-Leiste sind dunkler grau.

ntp_background

Die Hintergrundfarbe der neuen Registerkartenseite.

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

Firefox zeigt eine neue Registerkartenseite. Der Hintergrund der Seite ist rot.

ntp_card_background

Die Hintergrundfarbe der Karte der neuen Registerkartenseite.

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

Firefox zeigt eine neue Registerkartenseite. Auf der Seite ist der Hintergrund zur Suchleiste und Shortcut-Buttons rot.

ntp_text

Die Textfarbe der neuen Registerkartenseite.

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 Registerkartenseite. Auf der Seite ist der Text rot.

popup

Die Hintergrundfarbe von Popups (wie dem Dropdown der URL-Leiste und den Pfeilpanels).

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

Der Firefox-Browser ist schwarz. Die Registerkarten und die URL-Leiste des Browsers sind heller grau mit weißen Symbolen und Text. Das Symbol 'Diese Seite bookmarken' ist blau und gedrückt, ein geöffnetes Popup mit dem Namen 'Dieses Lesezeichen bearbeiten' wird mit einem roten Hintergrund angezeigt. Die Hintergrundfarbe des Popups ist rot.

popup_border

Die Rahmenfarbe von Popups.

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

Der Firefox-Browser ist schwarz. Die Registerkarten und die URL-Leiste des Browsers sind heller grau mit weißen Symbolen und Text. Das Symbol 'Diese Seite bookmarken' ist blau und gedrückt, ein geöffnetes Popup mit dem Namen 'Dieses Lesezeichen bearbeiten' wird mit einer roten Umrandung und schwarzem Hintergrund angezeigt. Der Rahmen des Popups ist rot.

popup_highlight

Die Hintergrundfarbe von Elementen, die innerhalb von Popups über die Tastatur hervorgehoben sind (wie das ausgewählte Dropdown-Element der URL-Leiste).

Hinweis: Es wird empfohlen, popup_highlight_text zu definieren, um die standardmäßige Browser-Textfarbe auf diversen Plattformen zu überschreiben.

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

Screenshot von Firefox ist schwarz. Die Registerkarten und die URL-Leiste des Browsers sind heller grau mit weißen Symbolen und Text. Ein Suchergebnis-Popup wird angezeigt mit dem Hintergrund des hervorgehobenen Elements in rot. Die Hintergrundfarbe des hervorgehobenen Elements innerhalb des Popups ist rot.

popup_highlight_text

Die Textfarbe von hervorgehobenen Elementen innerhalb von 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"
  }
}

Der Firefox-Browser ist schwarz. Die Registerkarten und die URL-Leiste des Browsers sind heller grau mit weißen Symbolen und Text. Ein Suchergebnis-Popup wird angezeigt mit dem Text des hervorgehobenen Elements in rot mit einem schwarzen Hintergrund. Die Textfarbe des hervorgehobenen Elements kontrastiert gut mit der schwarzen Hintergrundfarbe dieses Elements.

popup_text

Die Textfarbe von 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"
  }
}

Der Firefox-Browser ist schwarz. Die Registerkarten und die URL-Leiste des Browsers sind heller grau mit weißen Symbolen und Text. Ein Suchergebnis-Popup wird angezeigt mit rotem Text der Elemente. 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 naher Screenshot eines geöffneten Fensters der Browser-Seitenleiste. Die Hintergrundfarbe der Seitenleiste ist rot.

sidebar_border

Die Rahmen- und Trennfarbe der Browsersidebar

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

Eine Nahaufnahme der Bookmarks-Seitenleiste des Firefox-Browsers mit einem roten horizontalen Trennstrich zwischen dem Titel der Seitenleiste und dem Menü der Seitenleiste. Die Rahmen- und Trennfarbe der Sidebar ist rot.

sidebar_highlight

Die Hintergrundfarbe hervorgehobener Zeilen in integrierten Seitenleisten

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

Eine Nahaufnahme der Bookmarks-Seitenleiste 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 hervorgehobener 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 Bookmarks-Seitenleiste 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"
  }
}

Eine Nahaufnahme eines geöffneten Fensters der Browser-Seitenleiste. Die Farbe des Textes in der Seitenleiste ist weiß. Die Textfarbe kontrastiert gut mit dem roten Hintergrund der Seitenleiste.

tab_background_separator Veraltet

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

Die Farbe des vertikalen Trennstrichs der Hintergrund-Tabs.

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

Eine Nahaufnahme der 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 für den aktiven Tab-Text.

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

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

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

tab_line

Die Farbe der ausgewählten Tab-Linie.

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

Der Firefox-Browser ist schwarz. Die Registerkarten und die URL-Leiste des Browsers sind dunkler grau mit helleren grauen Symbolen und weißem Text. Der ausgewählte Tab hat eine rote Umrandung.

tab_loading

Die Farbe des Ladeindikators für Tabs und das Ladeausbürsten der Tabs.

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

Ein Screenshot eines Browserfensters mit einem offenen Tab. Der Browser ist schwarz. Die Registerkarten und die URL-Leiste des Browsers sind dunkler grau mit weißen Symbolen und Text. Im ausgewählten Tab ist ein animierter Ladeindikator rot.

tab_selected

Die Hintergrundfarbe des ausgewählten Tabs. Wenn nicht verwendet, wird die ausgewählte Tab-Farbe durch frame und das frame_inactive gesetzt.

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 offenen Tab. Der Browser ist schwarz. Die Registerkarten und die URL-Leiste des Browsers sind dunkler grau mit weißen Symbolen und Text. Der ausgewählte Tab hat einen roten Hintergrund und weißen Text.

tab_text

Ab Firefox 59 repräsentiert es die Textfarbe für den ausgewählten Tab. Wenn tab_line nicht angegeben ist, definiert es auch die Farbe der ausgewählten Tab-Linie.

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

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

Der Firefox-Browser hat ein Bild eines Insektenmotivs. Die URL-Leiste ist heller grau mit weißen Symbolen. Der ausgewählte Tab-Text ist rot mit weißem Hintergrund.

toolbar

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

Dies setzt auch die Hintergrundfarbe der "Finden"-Leiste.

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

Der Firefox-Browser ist schwarz. Die Registerkarte, die 'Seite durchsuchen'-Leiste und die URL-Leiste des Browsers sind rot mit weißen Texten und Symbolen, außer in der 'Seite durchsuchen'-Leiste, wo der Text und die Symbole schwarz sind.

toolbar_bottom_separator

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

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

Der Firefox-Browser ist schwarz. Die Registerkarte und die URL-Leiste sind heller grau mit weißen Symbolen und Text. Eine horizontale rote Linie trennt den unteren Teil der Toolbar und den Anfang der Anzeige der Webseite.

toolbar_field

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

Dies setzt auch die Hintergrundfarbe des Seite durchsuchen-Felds.

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

Der Firefox-Browser ist schwarz. Die Registerkarte, die 'Seite durchsuchen'-Leiste und die URL-Leiste sind heller grau mit weißen Symbolen und Text. Die Hintergrundfarbe der URL-Leiste ist rot. Die 'Seite durchsuchen'-Leiste ist weiß mit schwarzem Text. Das 'Seite durchsuchen'-Feld ist rot mit schwarzem Text.

toolbar_field_border

Die Rahmenfarbe für Felder in der Toolbar.

Dies setzt auch die Rahmenfarbe des Seite durchsuchen-Felds.

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

Der Firefox-Browser ist schwarz. Die Registerkarte, 'Seite durchsuchen'-Leiste und die URL-Leiste sind schwarz mit weißen Symbolen und Text. Die URL-Leiste und die 'Seite durchsuchen'-Felder sind rot umrandet.

toolbar_field_border_focus

Die fokussierte Rahmenfarbe für Felder in der Toolbar.

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"
  }
}

Der Firefox-Browser ist schwarz. Die Registerkarte und die URL-Leiste sind schwarz mit weißen Symbolen und Text. Das URL-Leisten-Feld ist fokussiert und rot umrandet.

toolbar_field_focus

Die fokussierte Hintergrundfarbe für Felder in der Toolbar, 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"
  }
}

Der Firefox-Browser ist schwarz. Die Registerkarte, 'Seite durchsuchen'-Leiste und die URL-Leiste sind schwarz mit weißen Symbolen und Text. Die Hintergrundfarbe der fokussierten URL-Leiste ist rot und der Text ist weiß.

toolbar_field_highlight Die Hintergrundfarbe, die zur Anzeige der aktuellen Textauswahl in der URL-Leiste verwendet wird (und der Suchleiste, wenn sie als separater Bereich konfiguriert ist).
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)"
  }
}

Der Firefox-Browser ist weiß. Die Registerkarte und die URL-Leiste sind weiß mit schwarzen Symbolen und Text. Das URL-Leisten-Feld ist fokussiert und blau umrandet, und der Text in der URL-Leiste ist ausgewählt.

Hier gibt das Feld toolbar_field_highlight an, dass die Hervorhebungsfarbe ein helles Grün ist, während der Text auf ein Mittelgrün bis Dunkelgrün mit toolbar_field_highlight_text eingestellt wird.

toolbar_field_highlight_text

Die Farbe, die zum Zeichnen von Text verwendet wird, der derzeit in der URL-Leiste (und der Suchleiste, wenn sie als separates Feld konfiguriert ist) ausgewählt ist.

Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit der in toolbar_field_highlight verwendeten Farbe 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)"
  }
}

Der Firefox-Browser ist weiß. Die Registerkarte und die URL-Leiste sind weiß mit schwarzen Symbolen und Text. Das URL-Leisten-Feld ist fokussiert und blau umrandet, und der Text in der URL-Leiste ist ausgewählt.

Hier wird das Feld toolbar_field_highlight_text verwendet, um die Textfarbe auf ein mittleres bis dunkleres Grün einzustellen, während die Hervorhebungsfarbe ein helles Grün ist.

toolbar_field_separator Veraltet

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

Die Farbe der Trennlinien innerhalb 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 offenen Tab. Der Firefox-Browser ist schwarz. Die Registerkarte und die URL-Leiste sind schwarz mit weißen Symbolen und Text. Innerhalb der weißen URL-Leistenfeld, nach dem Reader-Modus-Symbol, eine rote vertikale Linie, die den Rest der URL-Leisten-Symbole separiert. Die Farbe der vertikalen Trennlinie 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 Texts in Feldern in der Toolbar, wie die URL-Leiste. Dies setzt auch die Farbe des Texts im Seite durchsuchen-Feld.

Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit der in toolbar_field verwendeten Farbe 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 offenen Tab. Der Browser ist schwarz. Die Registerkarte und die URL-Leiste sind schwarz mit weißen Symbolen und Text. Der Text innerhalb der URL-Leiste ist rot. Die Symbole und das 'Seite durchsuchen'-Feld haben roten Text mit schwarzem Hintergrund.

toolbar_field_text_focus

Die Farbe des Texts in fokussierten Feldern in der Toolbar, wie die URL-Leiste.

Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit der in toolbar_field_focus verwendeten Farbe 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 offenen Tabs. Der Browser ist schwarz. Die Registerkarte und die URL-Leiste sind schwarz mit weißen Symbolen und Text. Die URL-Leiste hat Fokus; der Text und die Symbole der Leiste sind rot mit schwarzem Hintergrund.

toolbar_text

Die Farbe des Toolbar-Texts. Dies setzt auch die Farbe des Texts in der "Finden"-Leiste.

Hinweis: Für 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 offenen Tab. Der Browser ist schwarz. Die Registerkarte, die 'Seite durchsuchen'-Leiste und die URL-Leiste sind schwarz mit roten Texten und Symbolen. Der Text innerhalb des aktiven Tabs, der Navigatorleiste und der 'Seite durchsuchen'-Leiste ist rot.

toolbar_top_separator

Die Farbe der Linie, die den oberen Teil der Toolbar von dem darüber liegenden Bereich trennt.

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

Ein Screenshot eines Browserfensters mit einem offenen Tab. Der Browser ist schwarz. Die Registerkarte und die URL-Leiste sind schwarz mit weißen Symbolen und Text. Eine rote Linie trennt den oberen Teil der URL-Leiste von dem Browser.

toolbar_vertical_separator

Die Farbe des Separators in der Lesezeichenleiste. In Firefox 58 entspricht es der Farbe der Trenner innerhalb 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 offenen Tab. Der Browser ist schwarz. Die Registerkarte und die URL-Leiste sind schwarz mit weißen Symbolen und Text. Die Farbe der vertikalen Linie, die die Lesezeichenleiste von dem Inhalt rechts trennt, ist rot.

Aliase

Darüber hinaus 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 sowohl ein Alias als auch die Nicht-Alias-Version angegeben sind, wird der Wert aus der Nicht-Alias-Version übernommen.

Name Alias für
bookmark_text toolbar_text

Eigenschaften

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".

Falls nicht angegeben, wird auf "right top" standardmäßig gesetzt.

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 auf "no-repeat" gesetzt.

color_scheme

String

Optional

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

  • "auto" – ein helles oder dunkles Schema basierend auf dem Thema.
  • "light" – ein helles Schema.
  • "dark" – ein dunkles Schema.
  • "system" – verwendet das Systemschema.

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

content_color_scheme

String

Optional

Bestimmt, welches Farbschema auf den Inhalt angewendet wird (zum Beispiel integrierte Seiten und bevorzugtes Farbschema für Webseiten). Überschreibt color_scheme. Optionen umfassen:

  • "auto" – ein helles oder dunkles Schema basierend auf dem Thema.
  • "light" – ein helles Schema.
  • "dark" – ein dunkles Schema.
  • "system" – das Systemschema.

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

Beispiele

Ein grundlegendes Thema muss ein Bild definieren, das dem Header hinzugefügt werden soll, die Akzentfarbe für den Header sowie die dafür verwendete Textfarbe:

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

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

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 den Header auch mit einem wiederholten Bild oder Bilder füllen, in diesem Fall ein einzelnes Bild, das an der mittleren Spitze des Headers verankert und über den restlichen Header hinweg 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 nutzt die meisten 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 offenen Tabs und dunkler grünen Hintergrundfarbe im Headerbereich. Der inaktive Tab hat weiße Textfarbe. Der aktive Tab und die Toolbar haben eine blaue Hintergrundfarbe mit zyanfarbener Textfarbe. Die URL-Leiste hat einen orangen Hintergrund mit weißen Rändern, eine grüne Textfarbe und einen weißen vertikalen Linientrenner. Eine rote Linie wird verwendet, um die Tabs oben zu trennen, und eine weiße Linie, um die Tabs von dem darunter liegenden Inhalt zu trennen.

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, verwenden Sie stattdessen colors/bookmark_text.

  • images/theme_frame verankert das Bild an der oberen linken Seite des Headers und wenn das Bild den Header-Bereich nicht ausfüllt, wird das Bild gekachelt.

  • alle Farben müssen als Array von RGB-Werten angegeben werden, so:

    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-Farbform für alle Eigenschaften akzeptiert. Davor erforderte colors/frame und colors/tab_background_text die Array-Form, während andere Eigenschaften die CSS-Farbform erforderte.