theme_experiment

Typ Object
Verpflichtend 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 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 und properties neuen Eigenschaften des theme-Schlüssels zugeordnet.
  • (ohne ein Stylesheet) Verwendung von colors, images und properties, um interne Firefox-CSS-Selektoren wie --arrowpanel-dimmed neuen Eigenschaften des theme-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 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 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:

css
#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:

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 zur Folge, dass das Neuladensymbol orange wird.

Ergebnis eines Theme-Experiments, das den Neu-Ladeknopf in Orange zeigt.

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