Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

theme

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

Verwenden Sie den Schlüssel theme, um ein statisches Thema für Firefox zu definieren.

Hinweis: Wenn Sie ein Thema mit einer Erweiterung einbinden möchten, sehen Sie sich die theme API an.

Hinweis: Seit Mai 2019 müssen Themes signiert sein, um installiert zu werden (Firefox-Bug 1545109). Weitere Informationen finden Sie unter Signierung und Verteilung Ihres Add-ons.

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-Bildeigenschaften unterstützt:

  • JPEG
  • PNG
  • APNG
  • SVG (animierte SVGs werden 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.

images

Alle URLs sind relativ zur manifest.json-Datei und können nicht auf eine externe URL verweisen.

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 Header-Bereich hinzugefügt und an der oberen rechten Ecke des Headers verankert wird.

Hinweis: Chrome verankert das Bild oben links im Header, und wenn das Bild den Header-Bereich nicht ausfü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 derzeit in freigegebenen 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 Header-Bereich hinzugefügt und hinter dem "theme_frame":-Bild angezeigt werden. Diese Bilder legen das erste Bild im Array oben, das letzte Bild im Array unten.

Optional.

Standardmäßig sind alle Bilder oben rechts im Header-Bereich verankert, aber deren Ausrichtung und Wiederholungsverhalten können durch Eigenschaften von "properties": gesteuert werden.

colors

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

Übersicht über die Farbeigenschaften und wie sie auf die Firefox UI-Komponenten angewendet werden

Hinweis: Wo ein Komponent von mehreren Farbeigenschaften beeinflusst wird, sind die Eigenschaften in der Reihenfolge der Priorität aufgelistet.

Alle diese Eigenschaften können entweder als Zeichenfolge angegeben werden, die einen gültigen CSS-Farbwert (einschließlich hexadezimal) enthält, oder als RGB-Array, wie "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 wie folgt angegeben werden:

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

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

Name Beschreibung
bookmark_text

Die Farbe des Textes und der Symbole in den Lesezeichen- und Suchleisten. Wenn tab_text nicht definiert ist, wird damit die Farbe des aktiven Tab-Textes und wenn icons nicht definiert ist, die Farbe der Symbolleistensymbole festgelegt. Wird als Chrome-kompatibler Alias für toolbar_text bereitgestellt.

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

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

Die Firefox-Benutzeroberfläche ist schwarz. Der Tab-Bereich ist schwarz mit weißem Text. Die URL-Leiste und die Suchleiste sind weiß mit schwarzem Text, aber alle Symbole in der Browser- und Suchleiste sind rot.

button_background_active

Die Farbe des Hintergrunds der gedrückten Symbolleistenschaltflächen.

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

Die Firefox-Benutzeroberfläche ist schwarz. Die Tabs und die URL-Leiste sind grau mit weißem Text. Das 'Toolbar anpassen'-Icon in der URL-Leiste ist weiß mit einem roten Hintergrund und wird gedrückt, ein Popup wird geöffnet, das eine kurze Liste von Elementen anzeigt, die zur Toolbar hinzugefügt werden können, wie die Browser-Bibliothek und die Seitenleisten.

button_background_hover

Die Farbe des Hintergrunds der Symbolleistenschaltflächen beim Überfahren.

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

Die Firefox-Benutzeroberfläche ist schwarz. Die Tabs und die URL-Leiste sind grau mit weißem Text. Das 'Zurück'-Icon ist weiß mit einem roten Kreis-Hintergrund.

icons

Die Farbe der Symbolleistensymbole, mit Ausnahme derjenigen 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"
  }
}

Die Firefox-Benutzeroberfläche ist schwarz. Die Tabs und die URL-Leiste sind grau mit weißem Text. Die URL-Leiste und das 'Neuen Tab öffnen' Icon sind rot. Die roten Icons kontrastieren gut mit der schwarzen Hintergrundfarbe des Headers.

icons_attention

Die Farbe der Symbolleistensymbole im Aufmerksamkeitszustand, wie das Stern-Lesezeichen-Symbol 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"
  }
}

Die Firefox-Benutzeroberfläche ist schwarz. Die Tabs und die URL-Leiste sind grau mit weißem Text. Das 'Diese Seite als Lesezeichen speichern' Symbol ist rot und gedrückt, ein offenes Popup mit dem Namen 'Dieses Lesezeichen bearbeiten' wird angezeigt. Während sich das Symbol im Aufmerksamkeitszustand befindet, kontrastieren die Symbolleistensymbole gut mit dem schwarzen Hintergrund des Headers.

frame

Die Farbe des Header-Bereichs Hintergrunds, der in dem Teil des Headers angezeigt wird, der nicht durch die in"theme_frame" und "additional_backgrounds" angegebenen Bilder bedeckt oder sichtbar ist.

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

Die Firefox-Benutzeroberfläche ist rot mit weißem Text. Die Tabs sind heller rot, ebenfalls mit weißem Text. Die URL-Leiste ist sehr hellrot mit schwarzem Text

frame_inactive

Die Farbe des Header-Bereichs Hintergrunds, wenn das Browserfenster inaktiv ist, angezeigt in dem Teil des Headers, der nicht durch die in "theme_frame" und "additional_backgrounds" angegebenen Bilder bedeckt oder sichtbar ist.

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

Die Firefox-Benutzeroberfläche ist grau. Die Tabs und die URL-Leiste sind heller grau. Der Tab-Text ist weiß und die URL-Leistensymbole 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 Karte 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 der Suchleiste und der Schnellzugriffstasten rot.

ntp_text

Die Textfarbe auf der neuen Tab-Seite.

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

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

Firefox zeigt eine neue Tab-Seite an. Auf der Seite ist der Text rot.

popup

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

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

Die Firefox-Benutzeroberfläche ist schwarz. Die Tabs und die URL-Leiste sind heller grau mit weißen Symbolen und Text. Das 'Diese Seite als Lesezeichen speichern' Symbol ist blau und gedrückt, ein offenes Popup mit dem Namen 'Dieses Lesezeichen bearbeiten' wird angezeigt, mit rotem Hintergrund. 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"
  }
}

Die Firefox-Benutzeroberfläche ist schwarz. Die Tabs und die URL-Leiste sind heller grau mit weißen Symbolen und Text. Das 'Diese Seite als Lesezeichen speichern' Symbol ist blau und gedrückt, ein offenes Popup mit dem Namen 'Dieses Lesezeichen bearbeiten' wird angezeigt, mit rotem Rand und schwarzem Hintergrund. Der Rand des Popups ist rot.

popup_highlight

Die Hintergrundfarbe von mit der Tastatur hervorgehobenen Elementen innerhalb von Popups (wie dem ausgewählten 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"
  }
}

Screenshot von Firefox ist schwarz. Die Tabs und die URL-Leiste sind heller grau mit weißen Symbolen und Text. Ein Popup mit Suchergebnissen wird angezeigt, wobei das hervorgehobene Element einen roten Hintergrund hat. Die Hintergrundfarbe des hervorgehobenen Elements im Popup 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 kontrastiert.

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

Die Firefox-Benutzeroberfläche ist schwarz. Die Tabs und die URL-Leiste sind heller grau mit weißen Symbolen und Text. Ein Popup mit Suchergebnissen wird angezeigt, wobei das hervorgehobene Element einen Text in Rot und einen schwarzen Hintergrund hat. 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 kontrastiert.

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

Die Firefox-Benutzeroberfläche ist schwarz. Die Tabs und die URL-Leiste sind heller grau mit weißen Symbolen und Text. Ein Popup mit Suchergebnissen wird angezeigt, wobei die Textfarbe der Elemente rot ist. 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 Rahmen- und Trennlinie der Browser-Seitenleiste.

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

Ein Nahaufnahme der Firefox-Browser-Lesezeichen-Seitenleiste mit einem roten horizontalen Separator zwischen dem Titelbereich der Seitenleiste und dem Menü der Seitenleiste. Die Rahmen- und Trennlinie der Seitenleiste ist rot.

sidebar_highlight

Die Hintergrundfarbe von hervorgehobenen Zeilen in integrierten Seitenleisten.

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

Ein Nahaufnahme der Firefox-Browser-Lesezeichen-Seitenleiste mit einem hervorgehobenen Element. Die Hintergrundfarbe einer hervorgehobenen Zeile in der Seitenleiste ist rot mit weißem Text.

sidebar_highlight_text

Die Textfarbe von hervorgehobenen Zeilen in Seitenleisten.

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

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

Ein Nahaufnahme der Firefox-Browser-Lesezeichen-Seitenleiste 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 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 Veraltet

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

Die Farbe des vertikalen Trenners von Hintergrund-Tabs.

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

Ein Nahaufnahme von Tabs im Browser, um den Trennstrich hervorzuheben.

tab_background_text

Die Farbe des Textes, der in den inaktiven Seitentabs angezeigt wird. Wenn tab_text oder bookmark_text nicht angegeben ist, gilt dies 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 geöffneten Tab. Der Browser ist schwarz. Die Tabs und die URL-Leiste sind weiß mit roten Symbolen und rotem Text. Die Farbe des Textes auf dem geöffneten Tab ist rot. Die Textfarbe kontrastiert gut mit der schwarzen Hintergrundfarbe des Tabs.

tab_line

Die Farbe der Linie des ausgewählten Tabs.

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

Die Firefox-Benutzeroberfläche ist schwarz. Die Tabs und die URL-Leiste 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 und der Ladeblitzes 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 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 in Verwendung, wird die Farbe des ausgewählten Tabs von frame und 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 geöffneten Tab. Der Browser ist schwarz. Die Tabs und die URL-Leiste 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"
  }
}

Die Firefox-Benutzeroberfläche hat ein Bild eines Insekten-Themas. 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 "Suchen"-Leiste.

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

Die Firefox-Benutzeroberfläche ist schwarz. Die Tabs, die Suchleiste und die URL-Leiste sind rot mit weißem Text und weißen Symbolen, außer in der Suchleiste, wo Text und Symbol schwarz sind.

toolbar_bottom_separator

Die Farbe der Linie, die die Unterseite der Toolbar vom darunterliegenden Bereich trennt.

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

Die Firefox-Benutzeroberfläche ist schwarz. Die Tabs und die URL-Leiste sind heller grau mit weißen Text- und Symbolleisten. Eine horizontale rote Linie trennt die Unterseite der Toolbar vom Anfang der Anzeige der Webseite.

toolbar_field

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

Dies setzt auch die Hintergrundfarbe des Suchbereichs Feldes.

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

Die Firefox-Benutzeroberfläche ist schwarz. Die Tabs, die Suchleiste und die URL-Leiste sind heller grau mit weißen Text- und Symbolleisten. Die Hintergrundfarbe des URL-Feldes ist rot. Die Suchleiste ist weiß mit schwarzem Text. Das Suchfeld hat einen roten Hintergrund mit schwarzem Text.

toolbar_field_border

Die Rahmenfarbe für Felder in der Toolbar.

Dies setzt auch die Rahmenfarbe des Suchbereichs Feldes.

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

Die Firefox-Benutzeroberfläche ist schwarz. Die Tabs, die Such- und die URL-Leiste sind schwarz mit weißem Text und weißen Symbolleisten. Die URL-Leiste und das Suchfeld haben rote Rahmen.

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

Die Firefox-Benutzeroberfläche ist schwarz. Die Tabs und die URL-Leiste sind schwarz mit weißem Text und weißen Symbolleisten. Das URL-Feld ist fokussiert und hat einen roten Rahmen.

toolbar_field_focus

Die fokussierte Hintergrundfarbe für Felder in der Toolbar, wie z.B. dem URL-Bereich.

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

Die Firefox-Benutzeroberfläche ist schwarz. Die Tabs, die Such- und die URL-Leiste sind schwarz mit weißem Text und weißen Symbolleisten. Die Hintergrundfarbe der fokussierten URL-Leiste ist rot und der Text ist weiß.

toolbar_field_highlight Die Hintergrundfarbe zur Anzeige der aktuellen Auswahl von Text im URL-Feld (und dem Suchfeld, wenn es so konfiguriert ist, dass es getrennt 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)"
  }
}

Die Firefox-Benutzeroberfläche ist weiß. Die Tabs und die URL-Leiste sind weiß mit Text und Symbolen in schwarz. Das URL-Feld ist fokussiert und blau umrahmt und der Text im URL-Feld ist ausgewählt.

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

toolbar_field_highlight_text

Die Farbe, die verwendet wird, um Text zu zeichnen, der im URL-Feld (und dem Suchfeld, wenn es so konfiguriert ist, dass es getrennt ist) derzeit hervorgehoben ist.

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

Die Firefox-Benutzeroberfläche ist weiß. Die Tabs und die URL-Leiste sind weiß mit Text und Symbolen in schwarz. Das URL-Feld ist fokussiert und blau umrahmt und der Text im URL-Feld ist ausgewählt.

Hier wird das toolbar_field_highlight_text-Feld verwendet, um die Textfarbe auf ein dunkel-mittelgrünes Grün zu setzen, 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 Trennstriche innerhalb des URL-Felds. 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. Die Firefox-Benutzeroberfläche ist schwarz. Die Tabs und die URL-Leiste sind schwarz mit weißem Text und weißen Symbolleisten. Innerhalb des weißen URL-Felds, nach dem Lesemodus-Symbol ein roter vertikaler Trennstrich, der die restlichen Symbole der URL-Leiste trennt. Die Farbe der vertikalen Trennlinie im URL-Feld ist rot.

In diesem Screenshot ist "toolbar_vertical_separator" die rote vertikale Linie im URL-Feld, die das Lesezeichen-Symbol von den anderen Symbolen trennt.

toolbar_field_text

Die Farbe des Textes in Feldern in der Toolbar, wie dem URL-Bereich. Dies setzt auch die Farbe des Textes im Suchbereich-Feld.

Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit denen in toolbar_field 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 sind schwarz mit weißem Text und weißen Symbolleisten. Der Text im URL-Feld ist rot. Die Symbole und das Suchfeld haben roten Text mit schwarzem Hintergrund.

toolbar_field_text_focus

Die Farbe des Textes in fokussierten Feldern in der Toolbar, wie dem URL-Bereich.

Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit denen in toolbar_field_focus 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 sind schwarz mit weißem Text und weißen Symbolleisten. Die URL-Leiste hat Fokus; der Text und die Symbole der Leiste sind rot mit schwarzem Hintergrund.

toolbar_text

Die Farbe des Symbolleisten-Textes. Dies setzt auch die Farbe des Textes in der "Suchen"-Leiste.

Hinweis: Für die Kompatibilität mit Chrome verwenden Sie den 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 Suchleiste und die URL-Leiste sind schwarz mit rotem Text und roten Symbolleisten. Der Text im aktiven Tab, in der Navigationsleiste und in der Suchleiste ist rot.

toolbar_top_separator

Die Farbe der Linie, die die Oberseite der Toolbar vom 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 geöffneten Tab. Der Browser ist schwarz. Die Tabs und die URL-Leiste sind schwarz mit weißem Text und weißen Symbolleisten. Eine rote Linie trennt die Oberseite der URL-Leiste vom Browser.

toolbar_vertical_separator

Die Farbe des Trenners in der Lesezeichenleiste. In Firefox 58 entspricht dies der Farbe der Trennstriche 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 geöffneten Tab. Der Browser ist schwarz. Die Tabs und die URL-Leiste sind schwarz mit weißem Text und weißen Symbolleisten. Die Farbe der vertikalen Linie, die die Lesezeichenleiste 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 von 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 Enum-Werten, das die Ausrichtung des entsprechenden "additional_backgrounds":-Arrayelements definiert.
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 Enum-Werten, das definiert, wie das entsprechende "additional_backgrounds":-Arrayelement 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 (z.B. Kontextmenüs) und den Inhalt (z.B. integrierte Seiten und das bevorzugte Farbschema für Webseiten) angewendet wird. Optionen umfassen:

  • "auto" – ein helles oder dunkles Schema, das automatisch basierend auf dem Theme festgelegt wird.
  • "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 den Inhalt angewendet wird (z.B. integrierte Seiten und das bevorzugte Farbschema für Webseiten). Überschreibt color_scheme. Optionen umfassen:

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

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

Beispiele

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

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

Mehrere Bilder können verwendet werden, um den Header auszufüllen. Vor Firefox Version 60 verwenden Sie ein leeres oder durchsichtiges 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": "white"
   }
 }

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

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

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 Header-Bereich. Der inaktive Tab hat eine weiße Textfarbe. Der aktive Tab und die Toolbar haben eine blaue Hintergrundfarbe mit cyanfarbener Textfarbe. Die URL-Leiste hat einen orangefarbenen Hintergrund mit weißen Rändern, einer grünen Textfarbe und einer weißen vertikalen Trennlinie. Eine rote Linie wird verwendet, um die Tabs oben zu trennen, und eine weiße Linie, um die Tabs vom darunter liegenden Inhalt zu trennen.

In diesem Screenshot ist "toolbar_vertical_separator" die weiße vertikale Linie im URL-Feld, die das Lesezeichenmodus-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 oben links im Header, und wenn das Bild den Header-Bereich nicht ausfüllt, wird es gekachelt.

  • Alle Farben müssen als 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-Farbform für alle Eigenschaften akzeptiert. Vorher erforderten colors/frame und colors/tab_background_text die Array-Form, während andere Eigenschaften die CSS-Farbform benötigten.