theme_experiment

Тип	`Object`
Обязательный	Нет
Версия манифеста	2 или выше
Пример	"theme_experiment": { "stylesheet": "style.css", "colors": { "popup_affordance": "--arrowpanel-dimmed" }, "images": { "theme_toolbar": "--toolbar-bgimage" }, "properties": { "toolbar_image_alignment": "--toolbar-bgalignment" } }

Этот ключ позволяет определять экспериментальные свойства ключа theme для интерфейса Firefox. Эти эксперименты являются предшественниками предложений новых функций темы для включения в Firefox. Экспериментирование выполняется следующим образом:

создание таблицы стилей, которая определяет сопоставления между внутренними CSS-селекторами элементов пользовательского интерфейса Firefox и произвольными CSS-переменными. Эти CSS-переменные затем сопоставляются в объектах colors, images, и properties с новыми свойствами ключа theme.
(без таблицы стилей) использование colors, images, и properties для сопоставления внутренних CSS-селекторов Firefox, таких как --arrowpanel-dimmed, с новыми свойствами ключа theme. Этот вариант ограничивает эксперименты элементами пользовательского интерфейса, которые связаны со встроенной CSS-переменной.

Чтобы найти CSS-селекторы для элементов пользовательского интерфейса Firefox или внутренние CSS-переменные Firefox, используйте инструменты браузера.

Примечание: Этот ключ доступен только для использования в Firefox Developer Edition и Firefox Nightly и требует, чтобы предпочтение extensions.experiments.enabled было включено. В Firefox 73 и более ранних версиях вместо этого использовался extensions.legacy.enabled.

Предупреждение: Эта функция находится в стадии эксперимента и может быть изменена.

Синтаксис

Ключ theme_experiment представляет собой объект, который принимает следующие свойства:

Имя	Тип	Описание
`stylesheet`	`String`	Необязательно Имя таблицы стилей, предоставляющей сопоставление CSS-селекторов элементов пользовательского интерфейса Firefox со CSS-переменными.
`images`	`Object`	Необязательно Сопоставления CSS-переменных (определенных в Firefox или таблицей стилей, определенной в `stylesheet`) с именами свойств `images` для использования в ключе `theme`.
`colors`	`Object`	Необязательно Сопоставления CSS-переменных (определенных в Firefox или таблицей стилей, определенной в `stylesheet`) с именами свойств `colors` для использования в ключе `theme`.
`properties`	`Object`	Необязательно Сопоставления CSS-переменных (определенных в Firefox или таблицей стилей, определенной в `stylesheet`) с именами свойств `properties` для использования в ключе `theme`.

Примеры

Этот пример использует таблицу стилей с именем style.css для возможности установки цвета кнопки перезагрузки браузера в ключе theme.

Таблица стилей определяет:

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

где #reload-button — это внутренний CSS-селектор Firefox для кнопки перезагрузки, а --reload-button-color — произвольное имя.

В файле manifest.json --reload-button-color затем сопоставляется с именем, которое будет использоваться в свойстве colors ключа theme.

"theme_experiment": {
  "stylesheet": "style.css",
  "colors": {
    "reload_button": "--reload-button-color"
  }
}

Аргумент reload_button используется так же, как и любое другое свойство theme.

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

Это приводит к тому, что значок перезагрузки становится оранжевым.

Outcome of a theme experiment, showing the reload button colored orange.

Это свойство также может использоваться в browser.theme.update(). images и properties работают аналогично colors.

Совместимость с браузерами

	Рабочий стол						Мобильный
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet
`theme_experiment`	Нет	Нет	63	?	Нет	Нет	?	?	Нет	?	Нет	?
`colors`	Нет	Нет	63	?	Нет	Нет	?	?	Нет	?	Нет	?
`images`	Нет	Нет	63	?	Нет	Нет	?	?	Нет	?	Нет	?
`properties`	Нет	Нет	63	?	Нет	Нет	?	?	Нет	?	Нет	?

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme_experiment