theme

Typ Object
Verpflichtend 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 für Firefox festzulegen.

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

Hinweis: Seit Mai 2019 müssen Themes signiert werden, um installiert zu werden (Firefox Bug 1545109). Weitere Informationen finden Sie unter Signieren und Verteilen 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 (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 Eigenschaften akzeptiert:

Name Typ Beschreibung
images Object

Optional ab Firefox 60. Verpflichtend vor Firefox 60.

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

colors Object

Verpflichtend.

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 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 Datei manifest.json und können nicht auf eine externe URL verweisen.

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

Hinweis: Chrome verankert das Bild an der oberen linken Ecke des Headers und, wenn das Bild den Headerbereich nicht vollständig abdeckt, wird das Bild gekachelt.

Optional ab Firefox 60 auf dem Desktop. Erforderlich in Firefox für Android.
additional_backgrounds Array von String

Warnung: Die additional_backgrounds-Eigenschaft ist experimentell. Sie wird momentan 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 Headerbereich hinzugefügt und hinter dem "theme_frame":-Bild angezeigt werden. Diese Bilder schichten das erste Bild im Array oben und das letzte Bild im Array unten.

Optional.

Standardmäßig werden alle Bilder an der oberen rechten Ecke des Headerbereichs verankert, aber ihre Ausrichtung und Wiederholungsverhalten kann durch Eigenschaften von "properties": gesteuert werden.

colors

Diese Eigenschaften definieren die Farben, die in verschiedenen Teilen des Browsers verwendet werden. Sie sind alle optional. Wie diese Eigenschaften die Benutzeroberfläche von Firefox beeinflussen, wird hier gezeigt:

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

Hinweis: Wenn eine Komponente von mehreren Farbeigenschaften beeinflusst wird, sind die Eigenschaften in Vorzugsreihenfolge aufgelistet.

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

Hinweis: In Chrome dürfen Farben nur als RGB-Arrays angegeben werden.

In Firefox für Android können Farben mit Folgenotation angegeben werden:

  • volle hexadezimale Notation, d.h. nur #RRGGBB. alpha und verkürzte Syntax wie #RGB[A] werden nicht unterstützt.
  • Funktionelle Notation (RGB-Arrays) für Themes, die auf Firefox 68.2 oder neuer abzielen.

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

Name Beschreibung
bookmark_text

Die Farbe von Text und Symbolen in der Lesezeichen- und Suchleiste. Wenn tab_text nicht definiert ist, legt es auch die Farbe des aktiven Tab-Textes und, wenn icons nicht definiert ist, die Farbe der Toolbar-Symbole fest. Wird als Chrome-kompatibler Alias für toolbar_text bereitgestellt.

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

Wenn icons nicht definiert ist, stellen Sie auch einen guten Kontrast zu button_background_active und button_background_hover sicher.

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

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

button_background_active

Die Hintergrundfarbe der gedrückten Toolbar-Buttons.

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

Der Browser Firefox ist schwarz. Die Registerkarten und die URL-Leiste des Browsers sind grau mit weißem Text. Das Symbol in der Symbolleiste anpassen in der URL-Leiste ist weiß mit einem roten Hintergrund und wird gedrückt. Es erscheint ein Popup mit einer kurzen Liste von Dingen, die zur Symbolleiste hinzugefügt werden können, wie z.B. die Bibliothek des Browsers und die Seitenleisten.

button_background_hover

Die Hintergrundfarbe der Toolbar-Buttons beim Hover.

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

Der Browser Firefox ist schwarz. Die Registerkarten und die URL-Leiste des Browsers sind grau mit weißem Text. Das Zurück-Symbol ist weiß mit einem roten Kreis auf dem Hintergrund.

icons

Die Farbe der Toolbar-Symbole, mit Ausnahme der in der Suchtoolbar.

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

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

Der Browser Firefox ist schwarz. Die Registerkarten und die URL-Leiste des Browsers sind grau mit weißem Text. Die URL-Leiste und Öffnen-Symbol sind rot. Die roten Symbole stehen im guten Kontrast zum schwarzen Hintergrund des Headerbereichs.

icons_attention

Die Farbe der Toolbar-Symbole im Aufmerksamkeitszustand, wie dem gesicherten Lesezeichen-Symbol oder dem abgeschlossenen Download-Symbol.

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

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

Der Browser Firefox ist schwarz. Die Registerkarten und die URL-Leiste des Browsers sind grau mit weißem Text. Das Lesezeichen-zeichen für diese Seite ist rot und gedrückt, ein offenes Popup namens Bearbeiten dieses Lesezeichens wird angezeigt. Während des Aufmerksamkeit-Zustands stehen die Toolbar-Symbole gut im Kontrast zum schwarzen Hintergrund des Headerbereichs.

frame

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

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

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

frame_inactive

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

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

Der Browser Firefox ist grau. Die Registerkarten und die URL-Leiste des Browsers sind heller grau. Die Registerkarten-Text ist weiß und die Symbolleiste der URL-Leiste 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. Die Hintergrundfarbe der Seite ist rot.

ntp_card_background

Die Hintergrundfarbe der neuen Tab-Karte.

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

Firefox zeigt eine neue Tab-Seite. Auf der Seite ist der Hintergrund zur Suchleiste und den Schnellzugriff-Tasten 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. Auf der Seite ist der Text in Rot.

popup

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

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

Der Browser Firefox ist schwarz. Die Registerkarten und die URL-Leiste des Browsers sind heller grau, mit weißen Symbolen und Text. Das Symbol 'Diese Seite als Lesezeichen hinzufügen' ist blau und wird gedrückt, ein offenes Popup namens 'Dieses Lesezeichen bearbeiten' wird mit rotem Hintergrund angezeigt. Die Hintergrundfarbe des Popups ist rot.

popup_border

Die Randfarbe der Popups.

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

Der Browser Firefox ist schwarz. Die Registerkarten und die URL-Leiste des Browsers sind heller grau mit weißen Symbolen und Text. Das Symbol 'Diese Seite als Lesezeichen hinzufügen' ist blau und wird gedrückt, ein offenes Popup namens 'Dieses Lesezeichen bearbeiten' wird mit roter Umrandung und schwarzem Hintergrund angezeigt. Der Rand des Popups ist rot.

popup_highlight

Die Hintergrundfarbe von Elementen, die mit der Tastatur in Popups hervorgehoben werden (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"
  }
}

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

Der Browser 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 Text des hervorgehobenen Elements in rot vor schwarzem Hintergrund. Die Textfarbe des hervorgehobenen Elements im Popup-Kontrastiert steht gut im Kontrast zur schwarzen Hintergrundfarbe.

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

Der Browser 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 den Texten der Elemente in rot. Die Textfarbe steht im guten Kontrast zur 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 Nahaufnahmefoto des geöffneten Sidebars eines Browserfensters. Die Hintergrundfarbe der Sidebar ist rot.

sidebar_border

Die Rand- und Splitterfarbe der Browser-Sidebar

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

Ein Nahaufnahme des Firefox-Browsers der Lesezeichen-Sidebar mit einem roten horizontalen Trennzeichen zwischen dem Sidebar-Titel und dem Sidebar-Menü. Die Rand- und Splitplatte-Farbe der Sidebar ist rot.

sidebar_highlight

Die Hintergrundfarbe von hervorgehobenen Zeilen in Sidebars

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

Ein Nahaufnahme des Firefox-Browsers der Lesezeichen-Sidebar mit einem hervorgehobenen Eintrag. Die Hintergrundfarbe einer hervorgehobenen Zeile in der Sidebar ist rot mit weißem Text.

sidebar_highlight_text

Die Textfarbe von hervorgehobenen Zeilen in Sidebars.

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

Ein Nahaufnahme des Firefox-Browsers der Lesezeichen-Sidebar mit einem hervorgehobenen Eintrag. Die Textfarbe einer hervorgehobenen Zeile in der Sidebar ist rot. Die Textfarbe steht im guten Kontrast zur pinkfarbenen Hintergrundfarbe der hervorgehobenen Zeile.

sidebar_text

Die Textfarbe der Seitenleiste.

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 Nahaufnahmebild eines geöffneten Browserfensters der Sidebar. Die Textfarbe in der Sidebar ist weiß. Die Textfarbe steht im guten Kontrast zur roten Hintergrundfarbe der Sidebar.

tab_background_separator

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

Die Farbe des vertikalen Trennstrichs der Hintergrund-Tabs.

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

Ein Nahaufnahmebild von Browsertabs, um den Trennstrich hervorzuheben.

tab_background_text

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

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 Symbolen und rotem Text. Die Farbe des Textes im geöffneten Tab ist rot. Die Textfarbe steht im guten Kontrast zur 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"
  }
}

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

tab_loading

Die Farbe des Tabs-Ladeindikators und des Tabs-Ladeburst.

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 Registerkarten und die URL-Leiste des Browsers sind dunkler grau mit Symbolen und Text in Weiß. Innerhalb des ausgewählten Tabs ein animierter Ladeindikator ist rot.

tab_selected

Die Hintergrundfarbe des ausgewählten Tabs. Wenn nicht verwendet, wird die ausgewählte Tab-Farbe durch frame und die 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 Symbolen und Text in Weiß. 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 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"
  }
}

Der Browser Firefox hat ein Insektenthema. Die URL-Leiste ist heller grau mit weißen Symbolen. 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 setzt auch die Hintergrundfarbe der "Finde"-Leiste fest.

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

Der Browser Firefox ist schwarz. Die Registerkarte, die Seite-durchsuchen-Leiste und die URL-Leiste des Browsers sind rot mit weißem Text und Symbolen, außer der Seite-durchsuchen-Leiste, wo Text und Symbol 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 Browser Firefox ist schwarz. Die Registerkarte und die URL-Leiste des Browsers sind heller grau mit weißen Text und Symbolen. Eine horizontale rote Linie trennt den unteren Teil der Toolbar vom 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-Feldes fest.

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

Der Browser Firefox ist schwarz. Die Registerkarte, die Seite-durchsuchen-Leiste und die URL-Leiste des Browsers sind heller grau mit weißen Text und Symbolen. 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 Randfarbe für Felder in der Toolbar.

Dies setzt auch die Randfarbe des Seite-durchsuchen-Feldes 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"
  }
}

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

toolbar_field_border_focus

Die fokussierte Randfarbe 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 Browser Firefox ist schwarz. Die Registerkarten und die URL-Leiste sind schwarz mit weißen Symbolen und Text. Das URL-Leiste Feld ist fokussiert und mit rotem Rand umgeben.

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 Browser Firefox ist schwarz. Die Registerkarten, die Seite-durchsuchen-Leiste und die URL-Leiste sind schwarz mit weißen Text und Symbolen. Die Hintergrundfarbe der fokussiertem URL-Bar ist rot und der Text ist weiß.

toolbar_field_highlight Die Hintergrundfarbe, die verwendet wird, um die aktuelle Auswahl von Text in der URL-Leiste anzuzeigen (und in der Suchleiste, wenn sie so konfiguriert ist, dass sie separat 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 Browser Firefox ist weiß. Die Registerkarten und die URL-Leiste sind weiß mit Text und Symbolen in schwarz. Die URL-Leiste ist fokussiert und mit blauem Rand gezeichnet und der Text 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 mit toolbar_field_highlight_text auf ein dunkles bis mittleres Grün eingestellt ist.

toolbar_field_highlight_text

Die Farbe, die verwendet wird, um den Text zu zeichnen, der derzeit in der URL-Leiste (und in der Suchleiste, wenn sie so konfiguriert ist, dass sie separat ist) ausgewählt ist.

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

Der Browser Firefox ist weiß. Die Registerkarten und die URL-Leiste sind weiß mit Text und Symbolen in schwarz. Die URL-Leiste ist fokussiert und mit blauem Rand gezeichnet und der Text der URL-Leiste ist ausgewählt.

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

toolbar_field_separator

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

Die Farbe der Trennzeichen 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 Browser Firefox ist schwarz. Die Registerkarten und die URL-Leiste des Browsers sind schwarz mit Text und Symbolen in weiß. Innerhalb des weißen URL-Leiste-Feldes, nach dem Reader-Mode-Symbol ist eine rote vertikale Linie, die den Rest der URL-Leiste-Symbole trennt. 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 Symbol für den Reader-Modus von den anderen Symbolen trennt.

toolbar_field_text

Die Farbe des Textes in Feldern in der Toolbar, wie der URL-Leiste. Dies setzt auch die Farbe des Textes im Seite-durchsuchen-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 offenen Tab. Der Browser ist schwarz. Die Registerkarten und die URL-Leiste des Browsers sind schwarz mit weißen Text und Symbolen. Der Text innerhalb der URL-Leiste ist rot. Die Symbole und Seite-durchsuchen-Feld haben roten Text mit schwarzem Hintergrund.

toolbar_field_text_focus

Die Farbe des Textes in fokussierten Feldern in der Toolbar, 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 Registerkarten und die URL-Leiste des Browsers sind schwarz mit Text und Symbolen in weiß. Die URL-Leiste ist fokussiert; der Text und die Symbole des URL-Leiste sind rot mit schwarzen Hintergrund.

toolbar_text

Die Farbe des Toolbar-Textes. Dies setzt auch die Farbe des Textes in der "Finde"-Leiste fest.

Hinweis: Zur 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 Registerkarte, die Seite-durchsuchen-Leiste und die URL-Leiste des Browsers sind schwarz mit rotem Text und Symbolen. 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 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 geöffneten Tab. Der Browser ist schwarz. Die Registerkarte und die URL-Leiste des Browsers sind schwarz mit weißen Text und Symbolen. Eine rote Linie trennt den oberen Teil der URL-Leiste vom Browser.

toolbar_vertical_separator

Die Farbe des Separators in der Lesezeichen-Symbolleiste. In Firefox 58 entspricht dies der Farbe der Trennzeichen 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 Registerkarte und die URL-Leiste des Browsers sind schwarz mit Text und Symbolen in weiß. Die Farbe der vertikalen Linie, die die Lesezeichen-Symbolleiste vom Inhalt rechts trennt, ist rot.

Aliasse

Zusätzlich akzeptiert dieser Schlüssel verschiedene Eigenschaften, die Aliasse für eine der oben genannten Eigenschaften sind. Diese werden zur Kompatibilität mit Chrome bereitgestellt. Wenn ein Alias angegeben wird 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, das die Ausrichtung des entsprechenden "additional_backgrounds":-Array-Elements 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 auf "right top" standardmäßig festgelegt.
additional_backgrounds_tiling

Array von String

Optional

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

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

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

String

Optional

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

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

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

String

Optional

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

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

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

Beispiele

Ein grundlegendes Theme muss ein Bild definieren, das zum Header hinzugefügt wird, die Akzentfarbe, die im Header verwendet wird, und die Textfarbe, die im Header verwendet wird:

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 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 Bildern füllen, in diesem Fall ein einzelnes Bild, das in der Mitte oben im Header verankert 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 einer dunkelgrünen Hintergrundfarbe im Headerbereich. Der inaktive Tab hat weißen Text. Der aktive Tab und die Toolbar haben eine blaue Hintergrundfarbe mit cyanfarbenem Text. Die URL-Leiste hat einen orangefarbenen Hintergrund mit weißen Rändern, eine grüne Textfarbe und einen weißen vertikalen Liniensönner. 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

BCD tables only load in the browser

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 Ecke des Headers und wenn das Bild den Headerbereich 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 erforderten colors/frame und colors/tab_background_text die Array-Form, während andere Eigenschaften die CSS-Farbform erforderten.