theme
Typ | Object |
---|---|
Erforderlich | Nein |
Manifestversion | 2 oder höher |
Beispiel |
json
|
Verwenden Sie den Schlüssel theme
, um ein statisches Thema zu definieren, das auf Firefox angewendet werden soll.
Hinweis:
Wenn Sie ein Thema in eine Erweiterung einbinden möchten, siehe die theme
API.
Hinweis: Seit Mai 2019 müssen Themen signiert sein, um installiert werden zu können (Firefox bug 1545109). Einzelheiten 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 Themeneigenschaften unterstützt:
- JPEG
- PNG
- APNG
- SVG (animierte 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. 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
|
Bilder
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 den Header-Bereich immer vertikal ausfüllen.
Name | Typ | Beschreibung |
---|---|---|
theme_frame |
String |
Die URL eines Vordergrundbildes, das zum Header-Bereich hinzugefügt werden soll und an der oberen rechten Ecke des Header-Bereichs verankert wird. Hinweis: Chrome verankert das Bild an der oberen linken Seite des Headers und 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
Ein Array von URLs für zusätzliche Hintergrundbilder, die dem
Header-Bereich hinzugefügt und hinter dem
Optional.
Standardmäßig sind alle Bilder an der oberen rechten Ecke des
Header-Bereichs verankert, ihre Ausrichtung und Wiederholverhalten kann aber durch Eigenschaften von |
Farben
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:
|
Hinweis: Wenn eine Komponente von mehreren Farbeigenschaften beeinflusst wird, sind die Eigenschaften in der Reihenfolge der Vorrangigkeit aufgeführt.
Alle diese Eigenschaften können entweder als String mit einem beliebigen gültigen CSS-Farbestring (einschließlich Hexadezimalwerten) oder einem RGB-Array angegeben werden, wie 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 mit folgenden Angaben spezifiziert werden:
- vollständige Hexadezimalschreibweise, das heißt nur #RRGGBB. alpha und verkürzte Syntax, wie in #RGB[A], werden nicht unterstützt.
- Funktionale Notation (RGB-Arrays) für Themen, die auf Firefox 68.2 oder später abzielen.
Farben für Firefox für Android-Themen können nicht mit Farbnamen angegeben werden.
Name | Beschreibung |
---|---|
bookmark_text |
Die Farbe von Text und Icons in den Lesezeichen- und Suchleisten. Wenn
Hinweis: Stellen Sie sicher, dass jede verwendete Farbe gut mit
denen übereinstimmt, die in
Wo Beispiel ansehenjson
|
button_background_active |
Die Farbe des Hintergrunds der gedrückten Toolbar-Buttons. Beispiel ansehenjson
|
button_background_hover |
Die Farbe des Hintergrunds der Toolbar-Buttons beim Schweben. Beispiel ansehenjson
|
icons |
Die Farbe der Toolbar-Icons, ausgenommen die in der Suchleiste.
Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut
mit denen in Beispiel ansehenjson
|
icons_attention |
Die Farbe von Toolbar-Icons im Aufmerksamkeitsstatus, wie zum Beispiel das markierte Lesezeichen-Symbol oder das abgeschlossene Download-Symbol.
Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut
mit denen in Beispiel ansehenjson
|
frame |
Die Farbe des Hintergrunds des Headerbereichs, der in dem Teil des Headers angezeigt wird, der nicht von den in Beispiel ansehenjson
|
frame_inactive |
Die Farbe des Hintergrunds des Headerbereichs, wenn das Browserfenster inaktiv ist. Diese Farbe wird in dem Teil des Headers angezeigt, der nicht von den in Beispiel ansehenjson
|
ntp_background |
Die Hintergrundfarbe der neuen Registerkartenseite. Beispiel ansehenjson
|
ntp_card_background |
Die Hintergrundfarbe der Karte der neuen Registerkartenseite. Beispiel ansehenjson
|
ntp_text |
Die Textfarbe der neuen Registerkartenseite.
Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit
der in Beispiel ansehenjson
|
popup |
Die Hintergrundfarbe von Popups (wie dem Dropdown der URL-Leiste und den Pfeilpanels). Beispiel ansehenjson
|
popup_border |
Die Rahmenfarbe von Popups. Beispiel ansehenjson
|
popup_highlight |
Die Hintergrundfarbe von Elementen, die innerhalb von Popups über die Tastatur hervorgehoben sind (wie das ausgewählte 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 Trennfarbe der Browsersidebar Beispiel ansehenjson
|
sidebar_highlight |
Die Hintergrundfarbe hervorgehobener Zeilen in integrierten Seitenleisten Beispiel ansehenjson
|
sidebar_highlight_text |
Die Textfarbe hervorgehobener 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 Trennstrichs der Hintergrund-Tabs. Beispiel ansehenjson
|
tab_background_text |
Die Farbe des Textes, der in den inaktiven Tab-Seiten angezeigt wird. Wenn
Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut
mit denen in Beispiel ansehenjson
|
tab_line |
Die Farbe der ausgewählten Tab-Linie. Beispiel ansehenjson
|
tab_loading |
Die Farbe des Ladeindikators für Tabs und das Ladeausbürsten der Tabs. Beispiel ansehenjson
|
tab_selected |
Die Hintergrundfarbe des ausgewählten Tabs. Wenn nicht verwendet, wird die ausgewählte Tab-Farbe durch 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 "Finden"-Leiste. Beispiel ansehenjson
|
toolbar_bottom_separator |
Die Farbe der Linie, die den unteren Teil der Toolbar von dem darunter liegenden Bereich trennt. Beispiel ansehenjson
|
toolbar_field |
Die Hintergrundfarbe für Felder in der Toolbar, wie die URL-Leiste. Dies setzt auch die Hintergrundfarbe des Seite durchsuchen-Felds. Beispiel ansehenjson
|
toolbar_field_border |
Die Rahmenfarbe für Felder in der Toolbar. Dies setzt auch die Rahmenfarbe des Seite durchsuchen-Felds. 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 die URL-Leiste. Beispiel ansehenjson
|
toolbar_field_highlight |
Die Hintergrundfarbe, die zur Anzeige der aktuellen Textauswahl in der
URL-Leiste verwendet wird (und der Suchleiste, wenn sie als separater Bereich konfiguriert ist).
Beispiel ansehenjson
Hier gibt das Feld |
toolbar_field_highlight_text |
Die Farbe, die zum Zeichnen von Text verwendet wird, der derzeit in der URL-Leiste (und der Suchleiste, wenn sie als separates Feld konfiguriert ist) ausgewählt ist.
Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit
der in Beispiel ansehenjson
Hier wird das Feld |
toolbar_field_separator
Veraltet
|
Warnung:
Die Farbe der Trennlinien innerhalb der URL-Leiste. In Firefox 58 wurde dies
als Beispiel ansehenjson
In diesem Screenshot ist |
toolbar_field_text |
Die Farbe des Texts in Feldern in der Toolbar, wie die URL-Leiste. Dies setzt auch die Farbe des Texts im Seite durchsuchen-Feld.
Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit
der in Beispiel ansehenjson
|
toolbar_field_text_focus |
Die Farbe des Texts in fokussierten Feldern in der Toolbar, wie die URL-Leiste.
Hinweis: Stellen Sie sicher, dass die verwendete Farbe gut mit
der in Beispiel ansehenjson
|
toolbar_text |
Die Farbe des Toolbar-Texts. Dies setzt auch die Farbe des Texts in der "Finden"-Leiste.
Hinweis: Für Kompatibilität mit Chrome verwenden Sie das Alias
Beispiel ansehenjson
|
toolbar_top_separator |
Die Farbe der Linie, die den oberen Teil der Toolbar von dem darüber liegenden Bereich trennt. Beispiel ansehenjson
|
toolbar_vertical_separator |
Die Farbe des Separators in der Lesezeichenleiste. In Firefox 58 entspricht es der Farbe der Trenner innerhalb der URL-Leiste. Beispiel ansehenjson
|
Aliase
Darüber hinaus 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 sowohl ein Alias als auch die Nicht-Alias-Version angegeben sind, wird der Wert aus der Nicht-Alias-Version übernommen.
Name | Alias für |
---|---|
bookmark_text |
toolbar_text |
Eigenschaften
Name | Typ | Beschreibung |
---|---|---|
additional_backgrounds_alignment |
|
Optional
Ein Array von Enumerationswerten, die die Ausrichtung des
entsprechenden
Falls nicht angegeben, wird auf |
additional_backgrounds_tiling |
|
Optional
Ein Array von Enumerationswerten, die definieren, wie das entsprechende
Wenn nicht angegeben, wird standardmäßig auf |
color_scheme |
|
Optional Bestimmt, welches Farbschema auf das Chrome (zum Beispiel Kontextmenüs) und den Inhalt (zum Beispiel integrierte Seiten und das bevorzugte Farbschema für Webseiten) angewendet wird. Optionen umfassen:
Wenn nicht angegeben, wird standardmäßig auf |
content_color_scheme |
|
Optional
Bestimmt, welches Farbschema auf den Inhalt angewendet wird (zum Beispiel integrierte Seiten und
bevorzugtes Farbschema für Webseiten). Überschreibt
Wenn nicht angegeben, wird standardmäßig auf |
Beispiele
Ein grundlegendes Thema muss ein Bild definieren, das dem Header hinzugefügt werden soll, die Akzentfarbe für den Header sowie die dafür verwendete Textfarbe:
"theme": {
"images": {
"theme_frame": "images/sun.jpg"
},
"colors": {
"frame": "#CF723F",
"tab_background_text": "#000"
}
}
Mehrere Bilder können verwendet werden, um den Header auszufüllen. Vor Firefox-Version 60 verwenden Sie ein leeres oder transparentes Headerbild, um die Platzierung jedes zusätzlichen Bildes zu steuern:
"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 Bilder füllen, in diesem Fall ein einzelnes Bild, das an der mittleren Spitze des Headers verankert und über den restlichen Header hinweg wiederholt wird:
"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 nutzt die meisten 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 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 stattdessencolors/bookmark_text
. -
images/theme_frame
verankert das Bild an der oberen linken Seite des Headers und wenn das Bild den Header-Bereich 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 erforderte
colors/frame
undcolors/tab_background_text
die Array-Form, während andere Eigenschaften die CSS-Farbform erforderte.