theme
Typ | Object |
---|---|
Erforderlich | Nein |
Manifest-Version | 2 oder höher |
Beispiel |
json
|
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
|
colors |
Object |
Erforderlich.
Ein JSON-Objekt, dessen Eigenschaften die Farben verschiedener Teile
des Browsers darstellen. Siehe |
properties |
Object |
Optional
Dieses Objekt hat Eigenschaften, die beeinflussen, wie die
|
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
Ein Array von URLs für zusätzliche Hintergrundbilder, die dem
Header-Bereich hinzugefügt und hinter dem
Optional.
Standardmäßig sind alle Bilder oben rechts im Header-Bereich
verankert, aber deren Ausrichtung und Wiederholungsverhalten können
durch Eigenschaften von |
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:
|
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
Hinweis: Stellen Sie sicher, dass jede verwendete
Farbe gut mit denen in
Wo Beispiel ansehenjson
|
button_background_active |
Die Farbe des Hintergrunds der gedrückten Symbolleistenschaltflächen. Beispiel ansehenjson
|
button_background_hover |
Die Farbe des Hintergrunds der Symbolleistenschaltflächen beim Überfahren. Beispiel ansehenjson
|
icons |
Die Farbe der Symbolleistensymbole, mit Ausnahme derjenigen in der Suchleiste.
Hinweis: Stellen Sie sicher, dass die verwendete
Farbe gut mit denen in Beispiel ansehenjson
|
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 Beispiel ansehenjson
|
frame |
Die Farbe des Header-Bereichs Hintergrunds, der in dem Teil des Headers
angezeigt wird, der nicht durch die in Beispiel ansehenjson
|
frame_inactive |
Die Farbe des Header-Bereichs Hintergrunds, wenn das Browserfenster
inaktiv ist, angezeigt in dem Teil des Headers, der nicht durch die in Beispiel ansehenjson
|
ntp_background |
Die Hintergrundfarbe der neuen Tab-Seite. Beispiel ansehenjson
|
ntp_card_background |
Die Hintergrundfarbe der Karte auf der neuen Tab-Seite. Beispiel ansehenjson
|
ntp_text |
Die Textfarbe auf der neuen Tab-Seite.
Hinweis: Stellen Sie sicher, dass die verwendete
Farbe gut mit denen in Beispiel ansehenjson
|
popup |
Die Hintergrundfarbe von Popups (wie dem Dropdown-Menü der URL-Leiste und den Pfeil-Panels). Beispiel ansehenjson
|
popup_border |
Die Rahmenfarbe von Popups. Beispiel ansehenjson
|
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,
Beispiel ansehenjson
|
popup_highlight_text |
Die Textfarbe von hervorgehobenen Elementen innerhalb von Popups.
Hinweis: Stellen Sie sicher, dass die verwendete
Farbe gut mit der in Beispiel ansehenjson
|
popup_text |
Die Textfarbe von Popups.
Hinweis: Stellen Sie sicher, dass die verwendete
Farbe gut mit der in Beispiel ansehenjson
|
sidebar |
Die Hintergrundfarbe der Seitenleiste. Beispiel ansehenjson
|
sidebar_border |
Die Rahmen- und Trennlinie der Browser-Seitenleiste. Beispiel ansehenjson
|
sidebar_highlight |
Die Hintergrundfarbe von hervorgehobenen Zeilen in integrierten Seitenleisten. Beispiel ansehenjson
|
sidebar_highlight_text |
Die Textfarbe von hervorgehobenen Zeilen in Seitenleisten.
Hinweis: Stellen Sie sicher, dass die verwendete
Farbe gut mit der in Beispiel ansehenjson
|
sidebar_text |
Die Textfarbe der Seitenleisten.
Hinweis: Stellen Sie sicher, dass die verwendete
Farbe gut mit der in Beispiel ansehenjson
|
tab_background_separator
Veraltet
|
Warnung: Die Farbe des vertikalen Trenners von Hintergrund-Tabs. Beispiel ansehenjson
|
tab_background_text |
Die Farbe des Textes, der in den inaktiven Seitentabs angezeigt wird.
Wenn
Hinweis: Stellen Sie sicher, dass die verwendete
Farbe gut mit denen in Beispiel ansehenjson
|
tab_line |
Die Farbe der Linie des ausgewählten Tabs. Beispiel ansehenjson
|
tab_loading |
Die Farbe des Ladeindikators und der Ladeblitzes des Tabs. Beispiel ansehenjson
|
tab_selected |
Die Hintergrundfarbe des ausgewählten Tabs. Wenn nicht in Verwendung, wird die Farbe des ausgewählten Tabs von Beispiel ansehenjson
|
tab_text |
Ab Firefox 59 repräsentiert es die Textfarbe für den ausgewählten Tab. Wenn
Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit denen in Beispiel ansehenjson
|
toolbar |
Die Hintergrundfarbe für die Navigationsleiste, die Lesezeichenleiste und den ausgewählten Tab. Dies setzt auch die Hintergrundfarbe der "Suchen"-Leiste. Beispiel ansehenjson
|
toolbar_bottom_separator |
Die Farbe der Linie, die die Unterseite der Toolbar vom darunterliegenden Bereich trennt. Beispiel ansehenjson
|
toolbar_field |
Die Hintergrundfarbe für Felder in der Toolbar, wie die des URL-Felds. Dies setzt auch die Hintergrundfarbe des Suchbereichs Feldes. Beispiel ansehenjson
|
toolbar_field_border |
Die Rahmenfarbe für Felder in der Toolbar. Dies setzt auch die Rahmenfarbe des Suchbereichs Feldes. Beispiel ansehenjson
|
toolbar_field_border_focus |
Die fokussierte Rahmenfarbe für Felder in der Toolbar. Beispiel ansehenjson
|
toolbar_field_focus |
Die fokussierte Hintergrundfarbe für Felder in der Toolbar, wie z.B. dem URL-Bereich. Beispiel ansehenjson
|
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 ansehenjson
Hier gibt das |
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 Beispiel ansehenjson
Hier wird das |
toolbar_field_separator
Veraltet
|
Warnung:
Die Farbe der Trennstriche innerhalb des URL-Felds. In Firefox 58
wurde dies als Beispiel ansehenjson
In diesem Screenshot ist |
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 Beispiel ansehenjson
|
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 Beispiel ansehenjson
|
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 Beispiel ansehenjson
|
toolbar_top_separator |
Die Farbe der Linie, die die Oberseite der Toolbar vom darüber liegenden Bereich trennt. Beispiel ansehenjson
|
toolbar_vertical_separator |
Die Farbe des Trenners in der Lesezeichenleiste. In Firefox 58 entspricht dies der Farbe der Trennstriche innerhalb der URL-Leiste. Beispiel ansehenjson
|
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 |
|
Optional
Ein Array von Enum-Werten, das die Ausrichtung des entsprechenden
Wenn nicht angegeben, wird standardmäßig |
additional_backgrounds_tiling |
|
Optional
Ein Array von Enum-Werten, das definiert, wie das entsprechende
Wenn nicht angegeben, wird standardmäßig |
color_scheme |
|
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:
Wenn nicht angegeben, wird standardmäßig |
content_color_scheme |
|
Optional
Bestimmt, welches Farbschema auf den Inhalt angewendet wird (z.B. integrierte Seiten und
das bevorzugte Farbschema für Webseiten). Überschreibt
Wenn nicht angegeben, wird standardmäßig |
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:
"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:
"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:
"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
:
"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 im URL-Feld, die das Lesezeichenmodus-Symbol von den anderen Symbolen trennt.
Browser-Kompatibilität
Loading…
Chrome-Kompatibilität
In Chrome:
-
colors/toolbar_text
wird nicht verwendet, verwenden Sie stattdessencolors/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
undcolors/tab_background_text
die Array-Form, während andere Eigenschaften die CSS-Farbform benötigten.