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 Thema zu definieren, das auf Firefox angewendet wird.

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

Hinweis: Seit Mai 2019 müssen Themen signiert sein, um installiert werden zu können (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, befindet sich in der Entwicklung. Eine Vorabversion ist verfügbar. Die Vorabversion unterstützt keine Themen.

Bildformate

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

  • JPEG
  • PNG
  • APNG
  • SVG (animiertes 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. Verpflichtend vor Firefox 60.

Ein JSON-Objekt, dessen Eigenschaften die anzuzeigenden Bilder in verschiedenen Teilen des Browsers 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 hat Eigenschaften, die beeinflussen, wie die "additional_backgrounds"-Bilder angezeigt werden und Farbschemata angewendet werden. Siehe properties für Details zu den Eigenschaften, die dieses Objekt enthalten kann.

images

Alle URLs sind relativ zur manifest.json-Datei und können 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 dem Header-Bereich hinzugefügt und an der oberen rechten Ecke des Headers verankert wird.

Hinweis: Chrome verankert das Bild am oberen linken Rand des Headers und plattiert das Bild, wenn es den Header-Bereich nicht vollständig ausfüllt.

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 Freigabeversionen von Firefox akzeptiert, aber ihr Verhalten kann sich ändern. Es 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 an, das letzte Bild im Array unten.

Optional.

Standardmäßig sind alle Bilder an der oberen rechten Ecke des Header-Bereichs verankert, aber ihre Ausrichtung und Wiederholung 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. Wie diese Eigenschaften die Firefox-Benutzeroberfläche beeinflussen, wird hier gezeigt:

Übersicht der Farbeigenschaften und wie sie auf Firefox-Benutzeroberflächenkomponenten angewendet werden

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

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

  • vollständige hexadezimale Notation, also nur #RRGGBB. Alpha und verkürzte Syntax, wie in #RGB[A], werden nicht unterstützt.
  • funktionale Notation (RGB-Arrays) für Themen, die Firefox 68.2 oder später anvisieren.

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

Name Beschreibung
bookmark_text

Die Farbe des Textes und der Symbole in den Lesezeichen- und Suchleisten. Außerdem, wenn tab_text nicht definiert ist, legt es die Farbe des aktiven Tab-Textes fest und wenn icons nicht definiert ist, die Farbe der Toolbar-Symbole. Bereitgestellt als Chrome-kompatibler Alias für toolbar_text.

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

Wo icons nicht definiert ist, stellen Sie auch sicher, dass es einen guten Kontrast gibt mit button_background_active und button_background_hover.

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

Das Firefox-Browserfenster ist schwarz. Die Tabs des Browsers sind schwarz mit weißem Text. Die URL-Leiste und die 'Seite suchen'-Leiste sind weiß mit schwarzem Text, aber alle Browser- und 'Seite suchen'-Leistensymbole sind rot.

button_background_active

Farbe des Hintergrunds der gedrückten Toolbar-Schaltflächen.

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

Der Firefox-Browser ist schwarz. Die Tabs und die URL-Leiste des Browsers sind grau mit weißem Text. Das Anpassen der Toolbar-Symbole in der URL-Leiste in weiß mit einem roten Hintergrund ist gedrückt und ein Popup wird geöffnet, das eine kurze Liste von Elementen anzeigt, die zur Toolbar hinzugefügt werden können, wie die Bibliothek des Browsers und die Sidebars.
button_background_hover

Farbe des Hintergrunds der Toolbar-Schaltflächen beim Überfahren.

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

Der Firefox-Browser ist schwarz. Die Tabs und die URL-Leiste des Browsers sind grau mit weißem Text. Das Gehe-zurück-eine-Seite-Symbol ist weiß mit einem roten Kreis als Hintergrund.
icons

Farbe der Toolbar-Symbole, mit Ausnahme der Symbole in der Suchleiste.

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

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

Der Firefox-Browser ist schwarz. Die Tabs und die URL-Leiste des Browsers sind grau mit weißem Text. Die URL-Leiste und 'neuen Tab öffnen'-Symbole sind rot. Die roten Symbole kontrastieren gut mit der schwarzen Hintergrundfarbe des Header-Bereichs.
icons_attention

Farbe der Toolbar-Symbole im Aufmerksamkeitszustand, wie das Sterne-Lesezeichen-Symbol oder das Symbol für das abgeschlossene Herunterladen.

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

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

Der Firefox-Browser ist schwarz. Die Tabs und die URL-Leiste des Browsers sind grau mit weißem Text. Das Dieses-Seite-Lesezeichen-Symbol ist rot und gedrückt, ein offenes Popup mit dem Namen 'Dieses Lesezeichen bearbeiten' wird angezeigt. Im Aufmerksamkeitszustand kontrastieren die Toolbar-Symbole gut mit dem schwarzen Hintergrund des Header-Bereichs.
frame

Farbe des Hintergrunds des Header-Bereichs, angezeigt im Teil des Headers, der nicht durch die in "theme_frame" und "additional_backgrounds" angegebenen Bilder 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 Tabs des Browsers sind heller rot, ebenfalls mit weißem Text. Die URL-Leiste ist sehr hell rot mit schwarzem Text
frame_inactive

Farbe des Hintergrunds des Header-Bereichs, wenn das Browser-Fenster inaktiv ist, angezeigt im Teil des Headers, der nicht durch die in "theme_frame" und "additional_backgrounds" angegebenen Bilder abgedeckt oder sichtbar ist.

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

Der Firefox-Browser ist grau. Die Tabs und die URL-Leiste des Browsers sind heller grau. Der Tab-Text ist weiß und die URL-Leisten-Symbole 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 neuen Tab-Seitenkarte.

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 Schnellzugriff-Buttons rot.
ntp_text

Die Textfarbe der neuen Tab-Seite.

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

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

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

Die Hintergrundfarbe von Popups (z.B. das Dropdown der URL-Leiste und die Pfeil-Panels).

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

Der Firefox-Browser ist schwarz. Die Tabs und die URL-Leiste des Browsers sind heller grau mit weißen Symbolen und Text. Das Symbol 'Diese Seite als Lesezeichen speichern' ist blau und gedrückt, ein offenes Popup mit dem Namen 'Dieses Lesezeichen bearbeiten' wird angezeigt, der Hintergrund ist rot. 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 Tabs und die URL-Leiste des Browsers sind heller grau mit weißen Symbolen und Text. Das Symbol 'Diese Seite als Lesezeichen speichern' ist blau und gedrückt, ein offenes Popup mit dem Namen 'Dieses Lesezeichen bearbeiten' wird angezeigt mit rotem Rand und schwarzem Hintergrund. Der Rahmen des Popups ist rot.
popup_highlight

Die Hintergrundfarbe von Elementen, die innerhalb von Popups mit der Tastatur hervorgehoben werden (z.B. das ausgewählte Dropdown-Element in der URL-Leiste).

Hinweis: Es wird empfohlen, popup_highlight_text zu definieren, um die Standard-Browser-Textfarbe 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 des Browsers sind heller grau mit weißen Symbolen und Text. Ein Suchergebnis-Popup wird angezeigt mit einem hervorgehobenen Element in rotem Hintergrund. Der Hintergrund 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 kontrastiert mit jener, die in popup_highlight verwendet wird.

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

Der Firefox-Browser ist schwarz. Die Tabs und die URL-Leiste des Browsers sind heller grau mit weißen Symbolen und Text. Ein Suchergebnis-Popup wird angezeigt mit einem hervorgehobenen Element mit rotem Text auf schwarzem Hintergrund. Die Textfarbe des hervorgehobenen Elements kontrastiert gut mit dem schwarzen Hintergrund dieses Elements.
popup_text

Die Textfarbe von Popups.

Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut kontrastiert mit jener, die in popup verwendet wird.

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

Der Firefox-Browser ist schwarz. Die Tabs und die URL-Leiste des Browsers sind heller grau mit weißen Symbolen und Text. Ein Suchergebnis-Popup wird angezeigt mit Text in Rot. Die Textfarbe kontrastiert gut mit dem schwarzen Hintergrund des Popups.
sidebar

Die Hintergrundfarbe der Sidebar.

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

Ein Nahaufnahme-Screenshot des offenen Sidebars eines Browserfensters. Die Hintergrundfarbe des Sidebars ist rot.
sidebar_border

Die Rahmen- und Trennerfarbe der Browersidebar

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

Ein Nahaufnahme-Screenshot der Firefox-Browser-Lesezeichen-Sidebar mit einem roten horizontalen Trenner zwischen dem Sidebar-Titel und dem Sidebar-Menü. Die Rahmen- und Trennerfarbe der Sidebar ist rot.
sidebar_highlight

Die Hintergrundfarbe von hervorgehobenen Zeilen in eingebauten Sidebars

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

Ein Nahaufnahme-Screenshot der Firefox-Browser-Lesezeichen-Sidebar mit einem hervorgehobenen Element. 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 kontrastiert mit jener, die in sidebar_highlight verwendet wird.

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

Ein Nahaufnahme-Screenshot der Firefox-Browser-Lesezeichen-Sidebar mit einem hervorgehobenen Element. Die Farbe des Textes einer hervorgehobenen Zeile in der Sidebar ist rot. Die Textfarbe kontrastiert gut mit der pinken Hintergrundfarbe der hervorgehobenen Zeile.
sidebar_text

Die Textfarbe von Sidebars.

Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut kontrastiert mit jener, die in sidebar verwendet wird.

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

Ein Nahaufnahme-Screenshot des offenen Sidebars eines Browserfensters. Die Farbe des Textes innerhalb des Sidebars ist weiß. Die Textfarbe kontrastiert gut mit dem roten Hintergrund des Sidebars.
tab_background_separator

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

Die Farbe des vertikalen Trenners der Hintergrund-Tabs.

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

Ein Nahaufnahme-Screenshot der Browser-Tabs, um den Separator hervorzuheben.

tab_background_text

Die Farbe des Textes, der in den inaktiven Pagetabs angezeigt wird. Wenn tab_text oder bookmark_text nicht spezifiziert ist, gilt dies für den aktiven Tab-Text.

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

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 Tabs 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 Tabs und die URL-Leiste des Browsers sind dunkler grau mit hellgrauen Symbolen und weißem Text. Der ausgewählte Tab hat eine rote Umrandung.
tab_loading

Die Farbe des Tabs-Ladeindikators und des Lade-Bursts.

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 Tabs 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 den frame_inactive festgelegt.

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

Ein Screenshot eines Browserfensters mit einem offenen Tab. Der Browser ist schwarz. Die Tabs 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 kontrastiert mit den Farben, die in tab_selected oder frame und frame_inactive verwendet werden.

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 Insektenthema als Bild. 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 legt auch die Hintergrundfarbe der "Suchleiste" fest.

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

Der Firefox-Browser ist schwarz. Die Tabs, die Suchleiste und die URL-Leiste des Browsers sind rot mit weißen Symbolen und Text, mit Ausnahme der Suchleiste, bei der der Text und die Symbole schwarz sind.
toolbar_bottom_separator

Die Farbe der Linie, die den unteren Rand der Toolbar von der darunterliegenden Region trennt.

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

Der Firefox-Browser ist schwarz. Die Tabs und die URL-Leiste des Browsers sind heller grau mit weißen Symbolen und Text. Eine horizontale rote Linie trennt den unteren Rand der Toolbar von der Anzeige der Webseite.
toolbar_field

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

Dies legt auch die Hintergrundfarbe des Suchens auf der Seite-Feldes fest.

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

Der Firefox-Browser ist schwarz. Die Tabs, die Suchleiste und die URL-Leiste des Browsers sind heller grau mit weißen Symbolen und Text. Die Hintergrundfarbe der URL-Leiste ist rot. Die Suchleiste ist weiß mit schwarzem Text. Das Suchfeld hat roten Hintergrund mit schwarzem Text.
toolbar_field_border

Die Rahmenfarbe für Felder in der Toolbar.

Dies legt auch die Rahmenfarbe des Suchens auf der Seite-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 Firefox-Browser ist schwarz. Die Tabs, der Suchleiste und die URL-Leiste des Browsers sind schwarz mit weißen Symbolen und Text. Die URL-Leiste und das Suchfeld sind rot umrandet.
toolbar_field_border_focus

Die Fokus-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 Tabs und die URL-Leiste des Browsers sind schwarz mit weißen Symbolen und Text. Das URL-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 Tabs, die Suchleiste und die URL-Leiste des Browsers 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 zur Anzeige der aktuellen Markierung von Text in der URL-Leiste (und der Suchleiste, falls sie als separate Box 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 Tabs und die URL-Leiste des Browsers sind weiß mit schwarzen Symbolen und Text. Das URL-Feld ist fokussiert und blau umrandet und der URL-Leistentext ist ausgewählt.

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

toolbar_field_highlight_text

Die Farbe, die verwendet wird, um Text zu zeichnen, der aktuell in der URL-Leiste (und der Suchleiste, falls sie als separate Box konfiguriert ist) ausgewählt ist.

Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut kontrastiert mit jener, die in toolbar_field_highlight verwendet wird.

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 Tabs und die URL-Leiste des Browsers sind weiß mit schwarzen Symbolen und Text. Das URL-Feld ist fokussiert und blau umrandet und der URL-Leistentext ist ausgewählt.

Hier wird das toolbar_field_highlight_text-Feld verwendet, um den Text auf ein dunkelmittleres Grün zu setzen, während die Hervorhebungsfarbe ein helles Grün ist.

toolbar_field_separator

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

Die Farbe der Separatoren 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 Tabs und die URL-Leiste des Browsers sind schwarz mit weißen Symbolen und Text. Innerhalb der weißen URL-Leiste, nach dem Reader Mode-Symbol, eine rote vertikale Linie, die die anderen URL-Leisten-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 Reader Mode-Symbol von den anderen Symbolen trennt.

toolbar_field_text

Die Farbe des Textes in den Feldern der Toolbar, wie der URL-Leiste. Dies legt auch die Textfarbe im Suchens auf der Seite-Feld fest.

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

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 Tabs und die URL-Leiste des Browsers sind schwarz mit weißen Symbolen und Text. Der Text in der URL-Leiste 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 der URL-Leiste.

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

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 Tabs und die URL-Leiste des Browsers sind schwarz mit weißen Symbolen und Text. Die URL-Leiste hat Fokus; der Text und die Symbole sind rot mit schwarzem Hintergrund.
toolbar_text

Die Farbe des Toolbar-Textes. Dies legt auch die Farbe des Textes in der "Suchleiste" fest.

Hinweis: Für 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 offenen Tab. Der Browser ist schwarz. Die Tabs, die Suchleiste und die URL-Leiste des Browsers sind schwarz mit rotem Text und Symbolen. Der Text innerhalb des aktiven Tabs, der Navigationsleiste und der Suchleisten ist rot.
toolbar_top_separator

Die Farbe der Linie, die den oberen Rand der Toolbar von der darüberliegenden Region 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 Tabs und die URL-Leiste des Browsers sind schwarz mit weißen Symbolen und Text. Eine rote Linie trennt den oberen Rand der URL-Leiste vom Browser.
toolbar_vertical_separator

Die Farbe des Separators in der Lesezeichenleiste. In Firefox 58 entspricht sie der Farbe der Separatoren 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 Tabs und die URL-Leiste des Browsers sind schwarz mit weißen Symbolen und Text. Die Farbe der vertikalen Linie, die die Lesezeichenleiste von dem rechten Inhalt 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 ist und auch die Nicht-Alias-Version gegeben 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 Enumerationswerten, die 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 Enumerationswerten, die definieren, 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 Chrome (beispielsweise Kontextmenüs) und Inhalt (beispielsweise integrierte Seiten und das bevorzugte Farbschema für Webseiten) angewendet wird. Optionen umfassen:

  • "auto" – ein helles oder dunkles Schema, das automatisch basierend auf dem Thema ausgewählt 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 (beispielsweise 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 Thema ausgewählt wird.
  • "light" – ein helles Schema.
  • "dark" – ein dunkles Schema.
  • "system" – das System-Schema.

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

Beispiele

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

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 der Firefox-Version 60 verwenden Sie ein leeres oder transparentes Header-Bild, um die Platzierung jedes zusätzlichen Bildes steuern zu können:

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

Der Header kann auch mit einem wiederholten Bild oder Bildern gefüllt werden, in diesem Fall ein einzelnes Bild, das in der Mitte oben des Headers verankert ist und über den Rest des Headers wiederholt wird:

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

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

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

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

Dies ergibt einen Browser, der so aussieht:

Ein Browserfenster mit zwei offenen 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 cyanfarbigen Text. Die URL-Leiste hat einen orangefarbenen Hintergrund mit weißen Rändern, eine grüne Textfarbe und eine weißgefärbte vertikale Linien-Separator. Eine rotgefärbte Linie wird verwendet, um die Tabs oben zu trennen und eine weiße Linie trennt die Tabs vom darunterliegendem Inhalt.

In diesem Screenshot ist "toolbar_vertical_separator" die weiße vertikale Linie in der URL-Leiste, die das Reader Mode-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 am oberen linken Rand des Headers und wenn das Bild den Header-Bereich nicht vollständig ausfüllt, wird das Bild gekachelt.

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

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