theme_experiment
Typ | Object |
---|---|
Verpflichtend | Nein |
Manifest-Version | 2 oder höher |
Beispiel |
json
|
Dieser Schlüssel ermöglicht die Definition experimenteller Eigenschaften des theme
-Schlüssels für die Firefox-Oberfläche. Diese Experimente sind ein Vorläufer, um neue Theme-Features vorzuschlagen, die in Firefox aufgenommen werden sollen. Das Experimentieren erfolgt durch:
- Erstellen eines Stylesheets, das Zuordnungen zwischen internen CSS-Selektoren für Firefox-UI-Elemente und beliebigen CSS-Variablen definiert. Die CSS-Variablen werden dann in den Objekten
colors
,images
undproperties
neuen Eigenschaften destheme
-Schlüssels zugeordnet. - (ohne ein Stylesheet) Verwendung von
colors
,images
undproperties
, um interne Firefox-CSS-Selektoren wie--arrowpanel-dimmed
neuen Eigenschaften destheme
-Schlüssels zuzuordnen. Diese Option beschränkt das Experimentieren auf UI-Komponenten, die mit einer eingebauten CSS-Variable verbunden sind.
Um die CSS-Selektoren für Firefox-UI-Elemente oder interne Firefox-CSS-Variablen zu entdecken, verwenden Sie das Browser-Toolbox.
Hinweis: Dieser Schlüssel kann nur in den Firefox Developer Edition und Firefox Nightly Kanälen verwendet werden und erfordert das Aktivieren der Einstellung extensions.experiments.enabled
. In Firefox 73 und früher musste stattdessen extensions.legacy.enabled
verwendet werden.
Warnung: Diese Funktion ist experimentell und könnte Änderungen unterworfen sein.
Syntax
Der theme_experiment
-Schlüssel ist ein Objekt, das die folgenden Eigenschaften annimmt:
Name | Typ | Beschreibung |
---|---|---|
stylesheet |
String |
Optional Name eines Stylesheets, das die Zuordnung von Firefox-UI-Element-CSS-Selektoren zu CSS-Variablen bereitstellt. |
images |
Object |
Optional
Zuordnungen von CSS-Variablen (wie in Firefox oder durch das im |
colors |
Object |
Optional
Zuordnungen von CSS-Variablen (wie in Firefox oder durch das im |
properties |
Object |
Optional
Zuordnungen von CSS-Variablen (wie in Firefox oder durch das im |
Beispiele
Dieses Beispiel verwendet ein Stylesheet mit dem Namen style.css
, um die Möglichkeit zu bieten, eine Farbe für den Browser-Neuladeknopf im theme
-Schlüssel festzulegen.
Das Stylesheet definiert:
#reload-button {
fill: var(--reload-button-color);
}
wobei #reload-button
der interne Firefox-CSS-Selektor für den Neuladeknopf ist und --reload-button-color
ein beliebiger Name ist.
In der manifest.json
-Datei wird --reload-button-color
dann dem Namen zugeordnet, der in der colors
-Eigenschaft von theme
verwendet werden soll:
"theme_experiment": {
"stylesheet": "style.css",
"colors": {
"reload_button": "--reload-button-color"
}
}
Das Argument reload_button
wird auf die gleiche Weise wie jede andere theme
-Eigenschaft verwendet:
"theme": {
"colors": {
"reload_button": "orange"
}
}
Dies hat zur Folge, dass das Neuladensymbol orange wird.
Diese Eigenschaft kann auch in browser.theme.update()
verwendet werden. images
und properties
funktionieren ähnlich wie colors
.
Browser-Kompatibilität
BCD tables only load in the browser