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 theme-Schlüssel, um ein statisches Theme zu definieren, das auf Firefox angewendet werden soll.

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

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

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

Bildformate

Die folgenden Bildformate werden in allen Theme-Bild-Eigenschaften 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 enthält:

Name Typ Beschreibung

Name	Typ	Beschreibung
`images`	`Object`	Optional ab Firefox 60. Vor Firefox 60 verpflichtend. 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`	Verpflichtend. Ein JSON-Objekt, dessen Eigenschaften die Farben der verschiedenen Teile des Browsers repräsentieren. Siehe `colors` für Details zu den Eigenschaften, die dieses Objekt enthalten kann.
`properties`	`Object`	Optional Dieses Objekt besitzt 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

Object

Optional ab Firefox 60. Vor Firefox 60 verpflichtend.

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

Verpflichtend.

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

properties

Object

Optional

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

images

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

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

Name Typ Beschreibung

Name	Typ	Beschreibung
`theme_frame`	`String`	Die URL eines Vordergrundbildes, das dem Header-Bereich hinzugefügt und an der oberen rechten Ecke des Header-Bereichs verankert wird. Hinweis: Chrome verankert das Bild an der oberen linken Seite des Headers. Wenn das Bild den Header-Bereich nicht ausfüllt, wird das Bild gekachelt. Optional in Desktop-Firefox ab Version 60. Erforderlich in Firefox für Android.
`additional_backgrounds`	`Array` von `String`	Warnung: Die Eigenschaft `additional_backgrounds` ist experimentell. Sie wird derzeit in den Release-Versionen von Firefox akzeptiert, aber ihr Verhalten kann sich ändern. Sie wird nicht in Firefox für Android unterstützt. Ein Array von URLs für zusätzliche Hintergrundbilder, die dem Header-Bereich hinzugefügt und hinter dem `"theme_frame":`-Bild angezeigt werden. Diese Bilder schichten das erste Bild im Array oben und 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 Wiederholungsverhalten kann durch Eigenschaften von `"properties":` gesteuert werden.

theme_frame

String

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

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

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

additional_backgrounds

Array von String

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

Ein Array von URLs für zusätzliche Hintergrundbilder, die dem Header-Bereich hinzugefügt und hinter dem "theme_frame":-Bild angezeigt werden. Diese Bilder schichten das erste Bild im Array oben und 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 Wiederholungsverhalten kann 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 die Firefox-Benutzeroberfläche angewendet werden

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

Alle diese Eigenschaften können entweder als String angegeben werden, der jeden gültigen CSS Farb-String (einschließlich Hexadezimal) enthält, oder als RGB-Array, wie zum Beispiel "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 angegeben werden als:

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

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

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

Name	Beschreibung
`bookmark_text`	Die Farbe von Text und Symbolen in den Lesezeichen- und Suchleisten. Außerdem wird, wenn `tab_text` nicht definiert ist, die Farbe des Texts des aktiven Tabs gesetzt und wenn `icons` nicht definiert ist, die Farbe der Symbolleistensymbole. 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`, wenn Sie diese Eigenschaft verwenden, verwendeten Farben kontrastiert. Wenn `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" } }`
`button_background_active`	Die Hintergrundfarbe der gedrückten Symbolleistenschaltflächen. Beispiel ansehen json `"theme": { "colors": { "frame": "black", "tab_background_text": "white", "button_background_active": "red" } }`
`button_background_hover`	Die Hintergrundfarbe der Symbolleistenschaltflächen bei Hover. Beispiel ansehen json `"theme": { "colors": { "frame": "black", "tab_background_text": "white", "button_background_hover": "red" } }`
`icons`	Die Farbe der Symbolleistensymbole, mit Ausnahme der in der Suchsymbolleiste. 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" } }`
`icons_attention`	Die Farbe der Symbolleistensymbole im Zustand der Aufmerksamkeit, wie das Stern-Lesezeichensymbol oder das fertige 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" } }`
`frame`	Die Farbe des Hintergrunds des Headers, angezeigt in dem Teil des Headers, der nicht abgedeckt oder durch die in `"theme_frame"` und `"additional_backgrounds"` angegebenen Bilder sichtbar ist. Beispiel ansehen json `"theme": { "colors": { "frame": "red", "tab_background_text": "white" } }`
`frame_inactive`	Die Farbe des Hintergrunds des Headers, wenn das Browserfenster inaktiv ist, angezeigt in dem Teil des Headers, der nicht abgedeckt oder durch die in `"theme_frame"` und `"additional_backgrounds"` angegebenen Bilder sichtbar ist. Beispiel ansehen json `"theme": { "colors": { "frame": "red", "frame_inactive": "gray", "tab_text": "white" } }`
`ntp_background`	Die Hintergrundfarbe der neuen Registerkarte-Seite. Beispiel ansehen json `"theme": { "colors": { "ntp_background": "red" } }`
`ntp_card_background`	Die Hintergrundfarbe der neuen Registerkarte-Karte. Beispiel ansehen json `"theme": { "colors": { "ntp_card_background": "red" } }`
`ntp_text`	Die Textfarbe der neuen Registerkarte-Seite. Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit den in `ntp_background` und `ntp_card_background` verwendeten Farben kontrastiert. Beispiel ansehen json `"theme": { "colors": { "ntp_text": "red" } }`
`popup`	Die Hintergrundfarbe von Popups (wie z.B. das Dropdown der URL-Leiste und die Pfeil-Panels). Beispiel ansehen json `"theme": { "colors": { "frame": "black", "tab_background_text": "white", "popup": "red" } }`
`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" } }`
`popup_highlight`	Die Hintergrundfarbe von Elementen, die mit der Tastatur innerhalb von Popups hervorgehoben werden (wie das ausgewählte URL-Leisten-Dropdown-Element). Hinweis: Es wird empfohlen, `popup_highlight_text` zu definieren, um die standardmäßige Textfarbe 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" } }`
`popup_highlight_text`	Die Textfarbe von hervorgehobenen Elementen innerhalb von Popups. Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit denen in `popup_highlight` verwendeten Farben kontrastiert. Beispiel ansehen json `"theme": { "colors": { "frame": "black", "tab_background_text": "white", "popup_highlight": "black", "popup_highlight_text": "red" } }`
`popup_text`	Die Textfarbe von Popups. Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit denen in `popup` verwendeten Farben kontrastiert. Beispiel ansehen json `"theme": { "colors": { "frame": "black", "tab_background_text": "white", "popup": "black", "popup_text": "red" } }`
`sidebar`	Die Hintergrundfarbe der Seitenleiste. Beispiel ansehen json `"theme": { "colors": { "sidebar": "red", "sidebar_highlight": "white", "sidebar_highlight_text": "green", "sidebar_text": "white" } }`
`sidebar_border`	Die Farbe der Rahmen und Trennlinien der Browser-Seitenleiste Beispiel ansehen json `"theme": { "colors": { "sidebar_border": "red" } }`
`sidebar_highlight`	Die Hintergrundfarbe hervorgehobener Zeilen in integrierten Seitenleisten Beispiel ansehen json `"theme": { "colors": { "sidebar_highlight": "red", "sidebar_highlight_text": "white" } }`
`sidebar_highlight_text`	Die Textfarbe hervorgehobener Zeilen in Seitenleisten. Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit denen in `sidebar_highlight` verwendeten Farben kontrastiert. Beispiel ansehen json `"theme": { "colors": { "sidebar_highlight": "pink", "sidebar_highlight_text": "red", } }`
`sidebar_text`	Die Textfarbe der Seitenleisten. Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit denen in `sidebar` verwendeten Farben kontrastiert. Beispiel ansehen json `"theme": { "colors": { "sidebar": "red", "sidebar_highlight": "white", "sidebar_highlight_text": "green", "sidebar_text": "white" } }`
`tab_background_separator` Veraltet	Warnung: `tab_background_separator` wird ab Firefox 89 nicht mehr unterstützt. Die Farbe des vertikalen Separators der Hintergrund-Tabs. Beispiel ansehen json `"theme": { "colors": { "frame": "black", "tab_background_text": "white", "tab_background_separator": "red" } }`
`tab_background_text`	Die Farbe des Textes, der in den inaktiven Seitentabs angezeigt wird. Wenn `tab_text` oder `bookmark_text` nicht angegeben ist, wird auf den aktiven Tab-Text angewendet. Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit denen in `tab_selected` oder `frame` und `frame_inactive` verwendeten Farben kontrastiert. Beispiel ansehen json `"theme": { "colors": { "frame": "black", "toolbar": "white", "tab_background_text": "red" } }`
`tab_line`	Die Farbe der ausgewählten Tab-Linie. Beispiel ansehen json `"theme": { "colors": { "frame": "black", "tab_background_text": "white", "tab_line": "red" } }`
`tab_loading`	Die Farbe des Ladeindikators des Tabs und des Tab-Ladebursts. Beispiel ansehen json `"theme": { "colors": { "frame": "black", "tab_background_text": "white", "tab_loading": "red" } }`
`tab_selected`	Die Hintergrundfarbe des ausgewählten Tabs. Wenn nicht in Gebrauch, wird die ausgewählte Tab-Farbe 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" } }`
`tab_text`	Ab Firefox 59 repräsentiert es die Textfarbe des ausgewählten Tabs. 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` 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" } }`
`toolbar`	Die Hintergrundfarbe für die Navigationsleiste, die Lesezeichenleiste und den ausgewählten Tab. Dies setzt auch die Hintergrundfarbe der "Find"-Leiste. Beispiel ansehen json `"theme": { "colors": { "frame": "black", "toolbar": "red", "tab_background_text": "white" } }`
`toolbar_bottom_separator`	Die Farbe der Linie, die den unteren Bereich der Symbolleiste vom darunterliegenden Bereich trennt. Beispiel ansehen json `"theme": { "colors": { "frame": "black", "tab_background_text": "white", "toolbar_bottom_separator": "red" } }`
`toolbar_field`	Die Hintergrundfarbe für Felder in der Symbolleiste, wie die URL-Leiste. Dies setzt auch die Hintergrundfarbe des Finden in Seite-Feldes. Beispiel ansehen json `"theme": { "colors": { "frame": "black", "tab_background_text": "white", "toolbar_field": "red" } }`
`toolbar_field_border`	Die Rahmenfarbe für Felder in der Symbolleiste. Dies setzt auch die Rahmenfarbe des Finden in Seite-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" } }`
`toolbar_field_border_focus`	Die fokussierte Rahmenfarbe für Felder in der Symbolleiste. Beispiel ansehen json `"theme": { "colors": { "frame": "black", "toolbar": "black", "tab_background_text": "white", "toolbar_field": "black", "toolbar_field_text": "white", "toolbar_field_border_focus": "red" } }`
`toolbar_field_focus`	Die fokussierte Hintergrundfarbe für Felder in der Symbolleiste, wie die URL-Leiste. Beispiel ansehen json `"theme": { "colors": { "frame": "black", "toolbar": "black", "tab_background_text": "white", "toolbar_field": "black", "toolbar_field_text": "white", "toolbar_field_focus": "red" } }`
`toolbar_field_highlight`	Die Hintergrundfarbe, die verwendet wird, um die aktuelle Textauswahl in der URL-Leiste anzuzeigen (und der Suchleiste, wenn sie als separater Kasten 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)" } }` 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 dunkles bis mittleres Grün gesetzt ist.
`toolbar_field_highlight_text`	Die Farbe, die verwendet wird, um Text zu zeichnen, der derzeit in der URL-Leiste (und der Suchleiste, falls sie als separater Kasten konfiguriert ist) ausgewählt ist. Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit denen 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)" } }` Hier wird das `toolbar_field_highlight_text`-Feld verwendet, um die Textfarbe auf ein mittel- bis dunkelgrü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 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" } }` In diesem Screenshot ist `"toolbar_vertical_separator"` die rote vertikale Linie in der URL-Leiste, die das Leser-Modus-Symbol von den anderen Symbolen trennt.
`toolbar_field_text`	Die Farbe des Textes in Feldern der Symbolleiste, wie der URL-Leiste. Dies setzt auch die Farbe des Textes im Finden in Seite-Feld. Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit denen 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" } }`
`toolbar_field_text_focus`	Die Farbe des Textes in fokussierten Feldern der Symbolleiste, wie der URL-Leiste. Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit denen 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" } }`
`toolbar_text`	Die Farbe des Symbolleistentextes. Dies setzt auch die Farbe des Textes in der "Find"-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" } }`
`toolbar_top_separator`	Die Farbe der Linie, die die Oberseite der Symbolleiste vom darüberliegenden Bereich trennt. Beispiel ansehen json `"theme": { "colors": { "frame": "black", "tab_background_text": "white", "toolbar": "black", "toolbar_top_separator": "red" } }`
`toolbar_vertical_separator`	Die Farbe des Separators in der Lesezeichen-Symbolleiste. In Firefox 58 entspricht es 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" } }`

Aliase

Zusätzlich akzeptiert dieser Schlüssel verschiedene Eigenschaften, die Aliase einer der obigen Eigenschaften sind. Diese werden für die Kompatibilität mit Chrome bereitgestellt. Wenn ein Alias angegeben ist und die Version ohne Alias ebenfalls angegeben ist, wird der Wert von der Version ohne Alias übernommen.

Name	Alias für
`bookmark_text`	`toolbar_text`

properties

Name	Typ	Beschreibung
`additional_backgrounds_alignment`	`Array` von `String`	Optional Ein Array von Enumeration-Werten, die die Ausrichtung des entsprechenden `"additional_backgrounds":`-Array-Elements definieren. Die Ausrichtungsoptionen umfassen: `"bottom"` `"center"` `"left"` `"right"` `"top"` `"center bottom"` `"center center"` `"center top"` `"left bottom"` `"left center"` `"left top"` `"right bottom"` `"right center"` `"right top"`. Wenn nicht angegeben, ist das Standardwert `"right top"`.
`additional_backgrounds_tiling`	`Array` von `String`	Optional Ein Array von Enumeration-Werten, die definieren, wie das entsprechende `"additional_backgrounds":`-Array-Element wiederholt wird. Die Optionen umfassen: `"no-repeat"` `"repeat"` `"repeat-x"` `"repeat-y"` Wenn nicht angegeben, ist das Standardwert `"no-repeat"`.
`color_scheme`	`String`	Optional Bestimmt, welches Farbschema auf das 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 gewählt wird. `"light"` – ein helles Schema. `"dark"` – ein dunkles Schema. `"system"` – verwendet das System-Schema. Wenn nicht angegeben, ist das Standardwert `"auto"`.
`content_color_scheme`	`String`	Optional Bestimmt, welches Farbschema auf den Inhalt (z.B. integrierte Seiten und bevorzugtes Farbschema für Webseiten) angewendet wird. Überschreibt `color_scheme`. Optionen umfassen: `"auto"` – ein helles oder dunkles Schema, das automatisch basierend auf dem Theme gewählt wird. `"light"` – ein helles Schema. `"dark"` – ein dunkles Schema. `"system"` – das System-Schema. Wenn nicht angegeben, ist das Standardwert `"auto"`.

Beispiele

Ein grundlegendes Theme muss ein Bild definieren, das dem Header hinzugefügt wird, die Akzentfarbe, die im Header verwendet wird, und die Farbe des Texts 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 Firefox Version 60 verwenden Sie ein leeres oder transparentes Header-Bild, 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 mit einem einzelnen Bild, das in der Mitte, oben im Header verankert ist und über den Rest des Headers wiederholt wird:

json

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

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

json

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

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

Es wird Ihnen einen Browser geben, der so aussieht:

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

Browser-Kompatibilität

Chrome-Kompatibilität

In Chrome:

colors/toolbar_text wird nicht verwendet, verwenden Sie stattdessen colors/bookmark_text.
images/theme_frame verankert das Bild an der oberen linken Seite des Headers. Wenn das Bild den Header-Bereich nicht ausfüllt, wird das Bild gekachelt.

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