theme_experiment

Type	`Object`
Obligatorisch	Nein
Manifest-Version	2 oder höher
Beispiel	json `"theme_experiment": { "stylesheet": "style.css", "colors": { "popup_affordance": "--arrowpanel-dimmed" }, "images": { "theme_toolbar": "--toolbar-bgimage" }, "properties": { "toolbar_image_alignment": "--toolbar-bgalignment" } }`

Dieser Schlüssel ermöglicht die Definition experimenteller theme Schlüsseleigenschaften für die Firefox-Oberfläche. Diese Experimente sind ein Vorläufer, um neue Designfunktionen zur Aufnahme in Firefox vorzuschlagen. Das Experimentieren erfolgt durch:

Erstellen eines Stylesheets, das Zuordnungen zwischen internen CSS-Selektoren für Firefox-UI-Elemente und willkürlichen CSS-Variablen definiert. Die CSS-Variablen werden dann in den Objekten colors, images und properties neuen theme Schlüsseleigenschaften zugeordnet.
(ohne ein Stylesheet) Verwendung von colors, images und properties, um interne Firefox-CSS-Selektoren wie --arrowpanel-dimmed neuen theme Schlüsseleigenschaften zuzuordnen. Diese Option beschränkt Experimente 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 ist nur in Firefox Developer Edition und Firefox Nightly-Kanälen verfügbar und erfordert, dass die Einstellung extensions.experiments.enabled aktiviert ist. In Firefox 73 und früher musste stattdessen die Einstellung extensions.legacy.enabled verwendet werden.

Warnung: Diese Funktion ist experimentell und könnte Änderungen unterliegen.

Syntax

Der Schlüssel theme_experiment ist ein Objekt, das die folgenden Eigenschaften annimmt:

Name	Typ	Beschreibung
`stylesheet`	`String`	Optional Name eines Stylesheets, das die Zuordnung von Firefox-UI-Elementen CSS-Selektoren zu CSS-Variablen bereitstellt.
`images`	`Object`	Optional Zuordnungen von CSS-Variablen (wie in Firefox oder durch das im `stylesheet` definierte Stylesheet definiert) zu `images`-Eigenschaftsnamen zur Verwendung im `theme` Schlüssel.
`colors`	`Object`	Optional Zuordnungen von CSS-Variablen (wie in Firefox oder durch das im `stylesheet` definierte Stylesheet definiert) zu `colors`-Eigenschaftsnamen zur Verwendung im `theme` Schlüssel.
`properties`	`Object`	Optional Zuordnungen von CSS-Variablen (wie in Firefox oder durch das im `stylesheet` definierte Stylesheet definiert) zu `properties`-Eigenschaftsnamen zur Verwendung im `theme` Schlüssel.

Beispiele

Dieses Beispiel verwendet ein Stylesheet namens style.css, um die Möglichkeit zu bieten, eine Farbe für die Schaltfläche "Aktualisieren" im Browser im theme-Schlüssel festzulegen.

Das Stylesheet definiert:

css

#reload-button {
  fill: var(--reload-button-color);
}

wobei #reload-button der interne Firefox-CSS-Selektor für die Schaltfläche "Aktualisieren" ist und --reload-button-color ein willkürlicher Name ist.

Im manifest.json-File wird --reload-button-color dann auf den Namen gemappt, der in der Eigenschaft colors des theme verwendet werden soll:

json

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

json

"theme": {
  "colors": {
    "reload_button": "orange"
  }
}

Dies hat den Effekt, dass das Aktualisierungssymbol orange wird.

Ergebnis eines Theme-Experiments, das die Schaltfläche zum Aktualisieren orange färbt.

Diese Eigenschaft kann auch in browser.theme.update() verwendet werden. images und properties funktionieren ähnlich wie colors.

Browser-Kompatibilität

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden