Spec-Zone.ru › Web Extensions

тема

Тип Object
Обязательно Нет
Версия манифеста 2 или выше
Пример 
"theme": {
  "images": {
    "theme_frame": "images/sun.jpg"
  },
  "colors": {
    "frame": "#CF723F",
    "tab_background_text": "#000"
  }
}

Используйте ключ темы для определения статической темы, которая будет применена к Firefox.

Примечание: Если вы хотите включить тему с расширением, обратитесь к theme API.

Примечание: Начиная с мая 2019 года, темы должны быть подписаны для установки (ошибка Firefox 1545109). Подробнее см. Подписание и распространение вашего дополнения.

Примечание: Разрабатывается новая версия Firefox для Android, основанная на GeckoView. Доступна предварительная версия превью-версии. Предварительная версия не поддерживает темы.

Форматы изображений

Следующие форматы изображений поддерживаются во всех свойствах изображений темы:

  • JPEG
  • PNG
  • APNG
  • SVG (поддерживаются анимированные SVG с Firefox 59)
  • GIF (анимированные GIF не поддерживаются)

Синтаксис

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

Имя Тип Описание
images Object

Необязательно с Firefox 60. Обязательно до Firefox 60.

Объект JSON, свойства которого представляют изображения, отображаемые в различных частях браузера. Подробности о свойствах, которые может содержать этот объект, см. в images.

colors Object

Обязательно.

Объект JSON, свойства которого представляют цвета различных частей браузера. Подробности о свойствах, которые может содержать этот объект, см. в colors.

properties Object

Необязательно

Этот объект содержит свойства, которые влияют на отображение изображений "additional_backgrounds" и применение цветовых схем. Подробности о свойствах, которые может содержать этот объект, см. в properties.

Изображения

Все URL-адреса относительны к файлу manifest.json и не могут ссылаться на внешний URL-адрес.

Изображения должны иметь высоту 200 пикселей, чтобы они всегда заполняли заголовок по вертикали.

Имя Тип Описание
headerURL Устаревшее String

Предупреждение: headerURL удалено в Firefox 70. В Firefox 65 и более поздних версиях вы начнете получать предупреждения, если загрузите тему, использующую это свойство. Используйте theme_frame вместо этого.

URL-адрес изображения переднего плана, которое добавляется в область заголовка и закрепляется в правом верхнем углу области заголовка.

Необязательно в настольном Firefox с Firefox 60 и далее. Одно из theme_frame или headerURL должно быть указано до Firefox 60. Обратите также внимание, что в Firefox 60 и более поздних версиях любой text-shadow, примененный к тексту заголовка, удаляется, если не указан headerURL (см. [ошибка Firefox 1404688](https://bugzil.la/1404688)).

В Firefox для Android необходимо указать headerURL или theme_frame.

theme_frame String

URL-адрес изображения переднего плана, которое добавляется в область заголовка и закрепляется в правом верхнем углу области заголовка.

Примечание: Chrome закрепляет изображение в левом верхнем углу заголовка, а если изображение не заполняет область заголовка, масштабирует его.

Необязательно в настольном Firefox с Firefox 60 и далее. Одно из theme_frame или headerURL должно быть указано до Firefox 60.

В Firefox для Android необходимо указать headerURL или theme_frame.

additional_backgrounds Array массива String

Предупреждение: Свойство additional_backgrounds экспериментальное. В настоящее время оно поддерживается в релизах Firefox, но его поведение может измениться. Оно не поддерживается в Firefox для Android.

Массив URL-адресов дополнительных фоновых изображений, которые добавляются в область заголовка и отображаются позади изображения "theme_frame":. Эти изображения накладываются: первое изображение в массиве сверху, последнее — снизу.

Необязательно.

По умолчанию все изображения закрепляются в правом верхнем углу области заголовка, но их выравнивание и поведение повторения можно настроить с помощью свойств "properties":.

цвета

Эти свойства определяют цвета, используемые для различных частей браузера. Все они необязательны (хотя "accentcolor" и "textcolor" были обязательными в Firefox до версии 63). Влияние этих свойств на пользовательский интерфейс Firefox показано здесь:

Overview of the color properties and how they apply to Firefox UI components

Примечание: Если компонент затрагивается несколькими свойствами цвета, свойства перечислены в порядке приоритета.

Все эти свойства можно указать как строку, содержащую любой допустимый CSS-строку цвета (включая шестнадцатеричные), или массив RGB, например, "tab_background_text": [ 107 , 99 , 23 ].

Примечание: В Chrome цвета можно указывать только как массивы RGB.

В Firefox для Android цвета можно указывать с помощью:

  • полного шестнадцатеричного обозначения, то есть только #RRGGBB. alpha и сокращенный синтаксис, как в #RGB[A], не поддерживаются.
  • Функциональное обозначение (массивы RGB) для тем, нацеленных на Firefox 68.2 или более поздние версии.

Цвета для тем Firefox для Android не могут быть указаны с использованием имен цветов.

END_OF_DOCUMENT_MARKER
Имя Описание

accentcolor Устаревшее

Предупреждение: accentcolor было удалено в Firefox 70. Вы начнете получать предупреждения в Firefox 65 и более поздних версиях, если загрузите тему, использующую этот параметр. Используйте параметр frame вместо него.

Цвет фона области заголовка, отображаемой в части заголовка, которая не покрыта или не видна через изображения, указанные в "headerURL" и "additional_backgrounds".

Пример 
"theme": {
  "colors": {
     "accentcolor": "red",
     "tab_background_text": "white"
  }
}

Browser firefox is red with white text. Browsers tabs are lighter red, also with white text. URL bar is very light red with black text

bookmark_text

Цвет текста и значков в панелях закладок и поиска. Также, если tab_text не определён, он устанавливает цвет текста активной вкладки, и если icons не определён, цвет значков панели инструментов. Предоставлен как совместимый с Chrome псевдоним для toolbar_text.

Примечание: Убедитесь, что любой используемый цвет хорошо контрастирует с цветами, используемыми в frame и frame_inactive или toolbar , если вы используете этот параметр.

Там, где icons не определён, также обеспечьте хороший контраст с button_background_active и button_background_hover.

Пример 
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "tab_text": "white",
    "toolbar": "black",
    "bookmark_text": "red"
  }
}

Browser Firefox is black. Browser's tab is black with white text. URL bar and the find in page bar are white with black text but all the browser and the find in page bar icons are red.

button_background_active

Цвет фона нажатых кнопок панели инструментов.

Пример 
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "button_background_active": "red"
  }
}

Browser firefox is black. Browser's tabs and URL bar are grey with white text. The customize toolbar icon in the url bar in white with a red background is pressed and a popup is open displaying a short list of thing to add to the toolbar such as the browser's library and the sidebars.

button_background_hover

Цвет фона кнопок панели инструментов при наведении.

Пример 
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "button_background_hover": "red"
  }
}

Browser firefox is black. Browser's tabs and URL bar are grey with white text. The go back one page icon is white with a red circle background.

icons

Цвет значков панели инструментов, за исключением значков в панели инструментов поиска.

Примечание: Убедитесь, что используемый цвет хорошо контрастирует с цветами, используемыми в frame, frame_inactive, button_background_active, и button_background_hover.

Пример 
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "icons": "red"
  }
}

Browser firefox is black. Browser's tabs and URL bar are grey with white text. The URL bar and open a new tab icons are red. The red icons contrast well with the black background color of the header area.

icons_attention

Цвет значков панели инструментов в состоянии внимания, таких как значок закладки со звездой или значок завершенной загрузки.

Примечание: Убедитесь, что используемый цвет хорошо контрастирует с цветами, используемыми в frame, frame_inactive, button_background_active, и button_background_hover.

Пример 
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "icons_attention": "red"
  }
}

Browser firefox is black. Browser's tabs and URL bar are grey with white text. The bookmark this page icon is red and pressed, an open popup name edit this bookmark is displayed. While in attention state, the toolbar icons contrast well with the black background of the header area.

frame

Цвет фона области заголовка, отображаемой в части заголовка, которая не покрыта или не видна через изображения, указанные в "theme_frame" и "additional_backgrounds".

Пример 
"theme": {
  "colors": {
     "frame": "red",
     "tab_background_text": "white"
  }
}

Browser firefox is red with white text. Browsers tabs are lighter red, also with white text. URL bar is very light red with black text

frame_inactive

Цвет фона области заголовка, когда окно браузера неактивно, отображаемый в части заголовка, которая не покрыта или не видна через изображения, указанные в "theme_frame" и "additional_backgrounds".

Пример 
"theme": {
  "colors": {
     "frame": "red",
     "frame_inactive": "gray",
     "tab_text": "white"
  }
}

Browser firefox is grey. Browser's tabs and URL bar are lighter grey. The tab text is white and the URL bar icon are darker grey.

ntp_background

Цвет фона новой страницы вкладок.

Пример 
"theme": {
  "colors": {
     "ntp_background": "red",
     "ntp_text": "white"
  }
}

Browser firefox is white. The new tab page background is red, with google search at the top, follow by top sites shortcut and recommended articles.

ntp_text

Цвет текста новой страницы вкладок.

Примечание: Убедитесь, что используемый цвет хорошо контрастирует с цветом, используемым в ntp_background.

Пример 
"theme": {
  "colors": {
     "ntp_background": "red",
     "ntp_text": "white"
  }
}

Browser firefox is white. The new tab page background is red, with google search at the top, follow by top sites shortcut and recommended articles. The color of the text in the new tab page is white.

popup

Цвет фона всплывающих окон (например, выпадающего списка строки URL и панелей стрелок).

Пример 
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup": "red"
  }
}

Browser firefox is black. Browser's tabs and URL bar are lighter grey with icons and text in white. The bookmark this page icon is blue and pressed, an open popup name 'edit this bookmark' is displayed with a red background. The background color of the popup is red.

popup_border

Цвет рамки всплывающих окон.

Пример 
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup": "black",
     "popup_text": "white",
     "popup_border": "red"
  }
}

Browser firefox is black. Browser's tabs and URL bar are lighter grey with icons and text in white. The bookmark this page icon is blue and pressed, an open popup name 'edit this bookmark' is displayed with a red outline and black background. The popup's border is red.

popup_highlight

Цвет фона выделенных с помощью клавиатуры элементов внутри всплывающих окон (например, выбранного элемента выпадающего списка строки URL).

Примечание: Рекомендуется определить popup_highlight_text для переопределения стандартного цвета текста браузера на различных платформах.

Пример 
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup_highlight": "red",
     "popup_highlight_text": "white"
  }
}

screenshot of firefox is black. Browser's tabs and URL bar are lighter grey with icons and text in white. A search results popup is displayed with a highlighted item's background in red. The background color of the highlighted item inside the popup is red.

popup_highlight_text

Цвет текста выделенных элементов внутри всплывающих окон.

Примечание: Убедитесь, что используемый цвет хорошо контрастирует с цветом, используемым в popup_highlight.

Пример 
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup_highlight": "black",
     "popup_highlight_text": "red"
  }
}

Browser firefox is black. Browser's tabs and URL bar are lighter grey with icons and text in white. A search results popup is displayed with a highlighted item's text in red with a black background. The text color of the highlighted item contrasts well with the black background color of this item.

popup_text

Цвет текста всплывающих окон.

Примечание: Убедитесь, что используемый цвет хорошо контрастирует с цветом, используемым в popup.

Пример 
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup": "black",
     "popup_text": "red"
  }
}

Browser firefox is black. Browser's tabs and URL bar are lighter grey with icons and text in white. A search results popup is displayed with items texts in red. The text color contrasts well with the black background color of the popup.

sidebar

Цвет фона боковой панели.

Пример 
"theme": {
  "colors": {
     "sidebar": "red",
     "sidebar_highlight": "white",
     "sidebar_highlight_text": "green",
     "sidebar_text": "white"
  }
}

A close-up screenshot of a browser windows's open sidebar. The background color of the sidebar is red.

sidebar_border

Цвет границы и разделителя боковой панели браузера.

Пример 
"theme": {
  "colors": {
     "sidebar_border": "red"
  }
}

A closeup of the firefox browser bookmarks sidebar with a red horizontal separator between the sidebar title and the sidebar menu. The border and splitter color of the sidebar is red.

sidebar_highlight

Цвет фона выделенных строк в встроенных боковых панелях.

Пример 
"theme": {
  "colors": {
     "sidebar_highlight": "red",
     "sidebar_highlight_text": "white"
  }
}

A closeup of the firefox browser bookmarks sidebar with a highlighted item. The background color of a highlighted row in the sidebar is red with white text.

sidebar_highlight_text

Цвет текста выделенных строк в боковых панелях.

Примечание: Убедитесь, что используемый цвет хорошо контрастирует с цветом, используемым в sidebar_highlight.

Пример 
"theme": {
  "colors": {
    "sidebar_highlight": "pink",
    "sidebar_highlight_text": "red",
  }
}

A closeup of the firefox browser bookmarks sidebar with a highlighted item. The color of the text of a highlighted row in the sidebar is red. The text color contrasts well with the pink background color of the highlighted row.

sidebar_text

Цвет текста боковых панелей.

Примечание: Убедитесь, что используемый цвет хорошо контрастирует с цветом, используемым в sidebar.

Пример 
"theme": {
  "colors": {
     "sidebar": "red",
     "sidebar_highlight": "white",
     "sidebar_highlight_text": "green",
     "sidebar_text": "white"
  }
}

A close-up screenshot of a browser windows's open sidebar. The color of the text inside the sidebar is white. The text color contrasts well with the red background of the sidebar.

tab_background_separator Устаревшее

Предупреждение: tab_background_separator не поддерживается, начиная с Firefox 89.

Цвет вертикального разделителя фона вкладок.

Пример 
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_background_separator": "red"
  }
}

A closeup of browser tabs to highlight the separator.

tab_background_text

Цвет текста, отображаемого в неактивных вкладках. Если tab_text или bookmark_text не указаны, применяется к тексту активной вкладки.

Примечание: Убедитесь, что используемый цвет хорошо контрастирует с цветами, используемыми в tab_selected или frame и frame_inactive.

Пример 
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "white",
    "tab_background_text": "red"
  }
}

A screenshot of a browser window with one open tab. Browser is black. Browser's tabs and URL bar are white with red icons and red text. The color of the text in the open tab is red. The text color contrasts well with the black background color of the tab.

tab_line

Цвет выделенной линии вкладки.

Пример 
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_line": "red"
  }
}

Browser firefox is black. Browser's tabs and URL bar are darker grey with lighter grey icons and white text. The selected tab has a red outline.

tab_loading

Цвет индикатора загрузки вкладки и вспышки загрузки вкладки.

Пример 
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_loading": "red"
  }
}

A screenshot of a browser window with one open tab. Browser is black. Browser's tabs and URL bar are darker grey with icons and text in white. Inside the selected tab an animated loading indicator is red.

tab_selected

Цвет фона выделенной вкладки. Если не используется, цвет выделенной вкладки устанавливается параметром frame и frame_inactive.

Пример 
"theme": {
  "images": {
  "theme_frame": "weta.png"
},
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_selected": "red"
  }
}

A screenshot of a browser window with one open tab. Browser is black. Browser's tabs and URL bar are darker grey with icons and text in white. The selected tab has red background and white text.

tab_text

Начиная с Firefox 59, он представляет цвет текста выделенной вкладки. Если tab_line не указан, он также определяет цвет выделенной строки вкладки.

Примечание: Убедитесь, что используемый цвет хорошо контрастирует с цветами, используемыми в tab_selected или frame и frame_inactive.

В Firefox 55–58 неправильно реализован как псевдоним для "textcolor"

Пример 
"theme": {
  "images": {
  "theme_frame": "weta.png"
},
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_selected": "white",
     "tab_text": "red"
  }
}

Browser firefox has a picture of an insect theme. URL bar is lighter grey with white icons. The selected tab text is red with white background.

textcolor Устаревшее

Предупреждение: textcolor был удалён в Firefox 70. Вы начнете получать предупреждения в Firefox 65 и более поздних версиях, если загрузите тему, использующую эту свойство. Используйте tab_background_text вместо этого.

Цвет текста, отображаемого в области заголовка.

Пример 
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "white",
    "textcolor": "red"
  }
}

Browser firefox is black. Browser's tab and URL bar are white with red text and red icons.

toolbar

Цвет фона для панели навигации, панели закладок и выбранной вкладки.

Также устанавливает цвет фона панели «Найти».

Пример 
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "red",
    "tab_background_text": "white"
  }
}

Browser firefox is black. Browser's tab, find in page bar and URL bar are red with white text and icons, except for the find in page bar where the text and icon are black.

toolbar_bottom_separator

Цвет линии, разделяющей нижнюю часть панели инструментов и область ниже.

Пример 
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar_bottom_separator": "red"
  }
}

Browser firefox is black. Browser's tab and URL bar are lighter grey with white text and icons. A horizontal red line separates the bottom of the toolbar and the beginning of the display of the web page.

toolbar_field

Цвет фона для полей на панели инструментов, таких как адресная строка.

Также устанавливает цвет фона поля «Найти на странице».

Пример 
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar_field": "red"
  }
}

Browser firefox is black. Browser's tab, find in page bar and URL bar are lighter grey with white text and icons. The background color of the URL bar is red. The find in page bar is white with black text. The find in page field is red with black text.

toolbar_field_border

Цвет рамки для полей на панели инструментов.

Также устанавливает цвет рамки поля «Найти на странице».

Пример 
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_border": "red"
  }
}

Browser firefox is black. Browser's tab, find in page and URL bar are black with white text and icons. The URL bar and find in page fields are outlined in red.

toolbar_field_border_focus

Цвет рамки для полей на панели инструментов при фокусе.

Пример 
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_border_focus": "red"
  }
}

Browser firefox is black. Browser's tab and URL bar are black with white text and icons. The url bar field is focused and outlined in red.

toolbar_field_focus

Цвет фона полей на панели инструментов при фокусе, например, адресной строки.

Пример 
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_focus": "red"
  }
}

Browser firefox is black. Browser's tab, find in page and URL bar are black with white text and icons. The background color of the focused URL bar is red and the text is white.

toolbar_field_highlight Цвет фона, используемого для выделения текущего выбранного текста в адресной строке (и строке поиска, если она настроена как отдельная).
Пример 
"theme": {
  "colors": {
    "toolbar_field": "rgba(255, 255, 255, 0.91)",
    "toolbar_field_text": "rgb(0, 100, 0)",
    "toolbar_field_highlight": "rgb(180, 240, 180, 0.9)",
    "toolbar_field_highlight_text": "rgb(0, 80, 0)"
  }
}

Browser firefox is white. Browser's tab and URL bar are white with text and icons in black. The URL bar field is focused and outlined in blue and URL bar text is selected.

Здесь поле toolbar_field_highlight указывает, что цвет выделения — светло-зелёный, а текст настроен на тёмно-средне-зелёный с помощью toolbar_field_highlight_text.

toolbar_field_highlight_text

Цвет, используемый для рисования текста, который в данный момент выделен в адресной строке (и строке поиска, если она настроена как отдельная область).

Примечание: Убедитесь, что используемый цвет хорошо контрастирует с цветами, используемыми в toolbar_field_highlight.

Пример 
"theme": {
  "colors": {
    "toolbar_field": "rgba(255, 255, 255, 0.91)",
    "toolbar_field_text": "rgb(0, 100, 0)",
    "toolbar_field_highlight": "rgb(180, 240, 180, 0.9)",
    "toolbar_field_highlight_text": "rgb(0, 80, 0)"
  }
}

Browser firefox is white. Browser's tab and URL bar are white with text and icons in black. The URL bar field is focused and outlined in blue and URL bar text is selected.

Здесь поле toolbar_field_highlight_text используется для задания цвета текста тёмно-средне-зелёным, а цвет выделения — светло-зелёным.

toolbar_field_separator Устаревшее

Предупреждение: toolbar_field_separator не поддерживается, начиная с Firefox 89.

Цвет разделителей внутри адресной строки. В Firefox 58 это было реализовано как toolbar_vertical_separator.

Пример 
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field_separator": "red"
  }
}

A screenshot of a browser window with one open tab. Browser firefox is black. Browser's tab and URL bar are black with text and icons in white. Inside the white URL bar field, after the reader mode icon a red vertical line separating the rest of URL bar icons. The color of the vertical separator line inside the URL bar is red.

На этом скриншоте "toolbar_vertical_separator" — красная вертикальная линия в адресной строке, разделяющая значок «Режим чтения» от других значков.

toolbar_field_text

Цвет текста в полях на панели инструментов, таких как адресная строка. Также устанавливает цвет текста в поле «Найти на странице».

Примечание: Убедитесь, что используемый цвет хорошо контрастирует с цветами, используемыми в toolbar_field.

Пример 
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "red"
  }
}

A screenshot of a browser window with one open tab. Browser is black. Browser's tab and URL bar are black with white text and icons. The text inside the URL bar is red. The icons and find in page field have red text with black background.

toolbar_field_text_focus

Цвет текста в полях на панели инструментов, таких как адресная строка, при фокусе.

Примечание: Убедитесь, что используемый цвет хорошо контрастирует с цветами, используемыми в toolbar_field_focus.

Пример 
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_text_focus": "red"
  }
}

A screenshot of a browser window with two open tabs. Browser is black. Browser's tab and URL bar are black with text and icons in white. The URL bar has focus; the bar's text and icons are red with black background.

toolbar_text

Цвет текста на панели инструментов. Также устанавливает цвет текста в панели «Найти».

Примечание: Для совместимости с Chrome используйте псевдоним bookmark_text.

Пример 
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar": "black",
    "toolbar_text": "red"
  }
}

A screenshot of a browser window with one open tab. Browser is black. Browser's tab, find in page bar, and URL bar are black with red text and icons. The text inside the active tab, the navigator bar and the find bar is red.

toolbar_top_separator

Цвет линии, разделяющей верхнюю часть панели инструментов и область выше.

Пример 
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar": "black",
    "toolbar_top_separator": "red"
  }
}

A screenshot of a browser window with one open tab. Browser is black. Browser's tab and URL bar are black with white text and icons. A red line separates the top of the URL bar from the browser.

toolbar_vertical_separator

Цвет разделителя в панели инструментов закладок. В Firefox 58 он соответствует цвету разделителей внутри адресной строки.

Пример 
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar": "black",
    "toolbar_vertical_separator": "red"
  }
}

A screenshot of a browser window with one open tab. Browser is black. Browser's tab and URL bar are black with text and icons in white. The color of the vertical line separating the bookmarks toolbar from the content to the right is red.

Псевдонимы

Кроме того, этот ключ принимает различные свойства, которые являются псевдонимами одного из вышеперечисленных свойств. Они предоставляются для совместимости с Chrome. Если указан псевдоним, а также и не-псевдоним, значение будет взято из не-псевдонима.

Предупреждение: Начиная с Firefox 70, следующие свойства удалены: accentcolor и textcolor. Используйте frame и tab_background_text вместо них. Использование этих значений в темах, загружаемых в Firefox 65 или более поздних версиях, вызовет предупреждения.

Название Псевдоним для
bookmark_text toolbar_text
frame accentcolor Устаревшее
frame_inactive accentcolor Устаревшее
tab_background_text textcolor Устаревшее

свойства

Название Тип Описание
additional_backgrounds_alignment

Array String

Необязательно

Массив значений перечисления, определяющих выравнивание соответствующего элемента массива "additional_backgrounds":.
Варианты выравнивания включают:

  • "bottom"
  • "center"
  • "left"
  • "right"
  • "top"
  • "center bottom"
  • "center center"
  • "center top"
  • "left bottom"
  • "left center"
  • "left top"
  • "right bottom"
  • "right center"
  • "right top".

Если не указано, по умолчанию "right top".
additional_backgrounds_tiling

Array String

Необязательно

Массив значений перечисления, определяющих, как повторяется соответствующий элемент массива "additional_backgrounds":. Варианты включают:

  • "no-repeat"
  • "repeat"
  • "repeat-x"
  • "repeat-y"

Если не указано, по умолчанию "no-repeat".
color_scheme

String

Необязательно

Определяет, какая цветовая схема применяется к интерфейсу (например, контекстным меню) и содержимому (например, встроенным страницам и предпочтительной цветовой схеме для веб-страниц). Варианты включают:

  • "auto" — светлая или тёмная схема, автоматически выбранная на основе темы.
  • "light" — светлая схема.
  • "dark" — тёмная схема.
  • "system" — используется системная схема.

Если не указано, по умолчанию "auto".
content_color_scheme

String

Необязательно

Определяет, какая цветовая схема применяется к содержимому (например, встроенным страницам и предпочтительной цветовой схеме для веб-страниц). Переопределяет color_scheme. Варианты включают:

  • "auto" — светлая или тёмная схема, автоматически выбранная на основе темы.
  • "light" — светлая схема.
  • "dark" — тёмная схема.
  • "system" — системная схема.

Если не указано, по умолчанию "auto".
END_OF_DOCUMENT_MARKER

Примеры

Базовая тема должна определить изображение для добавления в заголовок, акцентный цвет для использования в заголовке и цвет текста, используемый в заголовке:

 "theme": {
   "images": {
     "theme_frame": "images/sun.jpg"
   },
   "colors": {
     "frame": "#CF723F",
     "tab_background_text": "#000"
   }
 }

Можно использовать несколько изображений для заполнения заголовка. Перед версией Firefox 60, используйте пустое или прозрачное изображение заголовка, чтобы получить контроль над размещением каждого дополнительного изображения:

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

Также можно заполнить заголовок повторяющимся изображением или изображениями, в этом случае одно изображение закреплено посередине в верхней части заголовка и повторяется по всему остальному заголовку:

 "theme": {
   "images": {
     "additional_backgrounds": [ "images/logo.png"]
   },
   "properties": {
     "additional_backgrounds_alignment": [ "top" ],
     "additional_backgrounds_tiling": [ "repeat"  ]
   },
   "colors": {
     "frame": "green",
     "tab_background_text": "#000"
   }
 }

Следующий пример использует большинство различных значений для 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"
    }
  }

Это даст браузер, который выглядит так:

A browser window with two open tabs and dark green background color in the header area. The inactive tab has a white text color. The active tab and the toolbar have a blue background color with cyan-colored text. The URL bar has an orange background with white borders, a green text color and a white-colored vertical line separator. A red-colored line is used to separate the tabs on the top and a white line to separate the tabs from the content bellow them.

На этом снимке экрана "toolbar_vertical_separator" — это белая вертикальная линия в адресной строке, разделяющая значок режима чтения от других значков.

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

Рабочий стол Мобильные устройства
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari на IOS Samsung Internet
theme Да 79 55 ? Нет Нет ? ? Да ? Нет ?
colors Да 79 55 ? Нет Нет ? ? 65 ? Нет ?
images Да 79
55Перед Firefox 60 это свойство было обязательно.
 ? Нет Нет ? ? Да ? Нет ?
properties Да 79 55 ? Нет Нет ? ? Нет ? Нет ?

Совместимость с Chrome

В Chrome:

  • colors/toolbar_text не используется, используйте colors/bookmark_text вместо этого.
  • images/theme_frame закрепляет изображение в левом верхнем углу заголовка, и если изображение не заполняет область заголовка, то изображение будет масштабироваться.
  • все цвета должны быть указаны как массив значений RGB, например: 
    "theme": {
  "colors": {
     "frame": [255, 0, 0],
     "tab_background_text": [0, 255, 0],
     "bookmark_text": [0, 0, 255]
  }
}
    С Firefox 59 и далее, оба формата (массив и CSS-цвет) принимаются для всех свойств. До этого colors/frame и colors/tab_background_text требовали формат массива, в то время как другие свойства требовали формат CSS-цвета.

© 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

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API