diff options
Diffstat (limited to 'files/de/mozilla/add-ons/webextensions/manifest.json/theme/index.html')
| -rw-r--r-- | files/de/mozilla/add-ons/webextensions/manifest.json/theme/index.html | 1359 |
1 files changed, 0 insertions, 1359 deletions
diff --git a/files/de/mozilla/add-ons/webextensions/manifest.json/theme/index.html b/files/de/mozilla/add-ons/webextensions/manifest.json/theme/index.html deleted file mode 100644 index 3f68335b18..0000000000 --- a/files/de/mozilla/add-ons/webextensions/manifest.json/theme/index.html +++ /dev/null @@ -1,1359 +0,0 @@ ---- -title: theme -slug: Mozilla/Add-ons/WebExtensions/manifest.json/theme -translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/theme ---- -<div>{{AddonSidebar}}</div> - -<table class="fullwidth-table standard-table"> - <tbody> - <tr> - <th scope="row" style="width: 30%;">Type</th> - <td><code>Object</code></td> - </tr> - <tr> - <th scope="row">Mandatory</th> - <td>No</td> - </tr> - <tr> - <th scope="row">Example</th> - <td> - <pre class="brush: json notranslate"> -"theme": { - "images": { - "theme_frame": "images/sun.jpg" - }, - "colors": { - "frame": "#CF723F", - "tab_background_text": "#000" - } -}</pre> - </td> - </tr> - </tbody> -</table> - -<p>Use the theme key to define a static theme to apply to Firefox.</p> - -<div class="note"> -<p><strong>Note</strong>: If you want to include a theme with an extension, please see the {{WebExtAPIRef("theme")}} API.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: Since May 2019, themes need to be signed to be installed ({{bug(1545109)}}). See <a href="/en-US/docs/Mozilla/Add-ons/Distribution">Signing and distributing your add-on</a> for more details.</p> -</div> - -<div class="note"> -<p><strong>Theme support in Firefox for Android</strong>: A new version of Firefox for Android, based on GeckoView, is under development. A <a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix" rel="noreferrer nofollow">pre-release version</a> is available. The pre-release version does not support themes.</p> -</div> - -<h2 id="Image_formats">Image formats</h2> - -<p>The following image formats are supported in all theme image properties:</p> - -<ul> - <li>JPEG</li> - <li>PNG</li> - <li>APNG</li> - <li>SVG (animated SVG is supported from Firefox 59)</li> - <li>GIF (animated GIF isn’t supported)</li> -</ul> - -<h2 id="Syntax">Syntax</h2> - -<p>The theme key is an object that takes the following properties:</p> - -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>images</code></td> - <td><code>Object</code></td> - <td> - <p>Optional as of Firefox 60. Mandatory before Firefox 60.</p> - - <p>A JSON object whose properties represent the images to display in various parts of the browser. See <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/theme#images">images</a></code> for details on the properties that this object can contain.</p> - </td> - </tr> - <tr> - <td><code>colors</code></td> - <td><code>Object</code></td> - <td> - <p>Mandatory.</p> - - <p>A JSON object whose properties represent the colors of various parts of the browser. See <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/theme#colors">colors</a></code> for details on the properties that this object can contain.</p> - </td> - </tr> - <tr> - <td><code>properties</code></td> - <td><code>Object</code></td> - <td> - <p>Optional</p> - - <p>This object has two properties that affect how the <code>"additional_backgrounds"</code> images are displayed. See <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/theme#properties">properties</a></code> for details on the properties that this object can contain.</p> - - <ul> - <li><code>"additional_backgrounds_alignment":</code> an array of enumeration values defining the alignment of the corresponding <code>"additional_backgrounds":</code> array item.<br> - The alignment options include: <code>"bottom"</code>, <code>"center"</code>, <code>"left"</code>, <code>"right"</code>, <code>"top"</code>, <code>"center bottom"</code>, <code>"center center"</code>, <code>"center top"</code>, <code>"left bottom"</code>, <code>"left center"</code>, <code>"left top"</code>, <code>"right bottom"</code>, <code>"right center"</code>, and <code>"right top"</code>. If not specified, defaults to <code>"right top"</code>.<br> - Optional</li> - <li><code>"additional_backgrounds_tiling":</code> an array of enumeration values defining how the corresponding <code>"additional_backgrounds":</code> array item repeats, with support for <code>"no-repeat"</code>, <code>"repeat"</code>, <code>"repeat-x"</code>, and <code>"repeat-y"</code>. If not specified, defaults to <code>"no-repeat"</code>.<br> - Optional</li> - </ul> - </td> - </tr> - </tbody> -</table> - -<h3 id="images">images</h3> - -<p dir="ltr">All URLs are relative to the manifest.json file and cannot reference an external URL.</p> - -<p dir="ltr">Images should be 200 pixels high to ensure they always fill the header space vertically.</p> - -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>headerURL </code> <code>{{Deprecated_Inline}}</code></td> - <td><code>String</code></td> - <td> - <div class="blockIndicator warning"> - <p><code>headerURL</code> has been removed in Firefox 70. You will begin to get warnings in Firefox 65 and later if you load a theme that uses this property. Use <code>theme_frame</code> instead.</p> - </div> - - <p>The URL of a foreground image to be added to the header area and anchored to the upper right corner of the header area.</p> - - <p>Optional in desktop Firefox from Firefox 60 onwards. One of <code>theme_frame</code> or <code>headerURL</code> had to be specified before Firefox 60. Note also that in Firefox 60 onwards, any {{cssxref("text-shadow")}} applied to the header text is removed if no <code>headerURL</code> is specified (see {{bug(1404688)}}).</p> - - <p>In Firefox for Android, <code>headerURL</code> or <code>theme_frame</code> must be specified.</p> - </td> - </tr> - <tr> - <td><code>theme_frame</code></td> - <td><code>String</code></td> - <td> - <p>The URL of a foreground image to be added to the header area and anchored to the upper right corner of the header area.</p> - - <div class="blockIndicator note"> - <p>Chrome anchors the image to the top left of the header and if the image doesn’t fill the header area tile the image.</p> - </div> - - <p>Optional in desktop Firefox 60 onwards. One of <code>theme_frame</code> or <code>headerURL</code> had to be specified before Firefox 60.</p> - - <p>In Firefox for Android, <code>headerURL</code> or <code>theme_frame</code> must be specified.</p> - </td> - </tr> - <tr> - <td><code>additional_backgrounds</code></td> - <td><code>Array </code>of <code>String</code></td> - <td> - <div class="warning"> - <p>The <code>additional_backgrounds</code> property is experimental. It is currently accepted in release versions of Firefox, but its behavior is subject to change. It is not supported in Firefox for Android.</p> - </div> - - <p>An array of URLs for additional background images to be added to the header area and displayed behind the <code>"theme_frame":</code> image. These images layer the first image in the array on top, the last image in the array at the bottom.</p> - - <p>Optional.</p> - - <p>By default all images are anchored to the upper right corner of the header area, but their alignment and repeat behavior can be controlled by properties of <code>"properties":</code>.</p> - </td> - </tr> - </tbody> -</table> - -<h3 id="colors">colors</h3> - -<p>These properties define the colors used for different parts of the browser. They are all optional (but note that <code>"accentcolor"</code> and <code>"textcolor"</code> were mandatory in Firefox before version 63). How these properties affect the Firefox UI is shown here:</p> - -<table class="fullwidth-table standard-table"> - <tbody> - <tr> - <td style="background-color: white;"> - <p><img alt="Overview of the color properties and how they apply to Firefox UI components" src="https://mdn.mozillademos.org/files/16855/Themes_components_annotations.png" style="height: 1065px; width: 1521px;"></p> - </td> - </tr> - </tbody> -</table> - -<div class="blockIndicator note"> -<p>Where a component is affected by multiple color properties, the properties are listed in order of precedence.</p> -</div> - -<p>All these properties can be specified as either a string containing any valid <a href="/en-US/docs/Web/CSS/color_value">CSS color string</a> (including hexadecimal), or an RGB array, such as <code>"tab_background_text": [ 107 , 99 , 23 ]</code>.</p> - -<div class="blockIndicator note"> -<p><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/theme#Chrome_compatibility">In Chrome, colors may only be specified as RGB arrays</a>.</p> - -<p>In Firefox for Android colors can be specified using:</p> - -<ul> - <li>full hexadecimal notation, that is #RRGGBB only. <em>alpha</em> and shortened syntax, as in #RGB[A], are not supported.</li> - <li><a href="/en-US/docs/Web/CSS/color_value#Syntax_2">Functional notation</a> (RGB arrays) for themes targeting Firefox 68.2 or later.</li> -</ul> - -<p>Colors for Firefox for Android themes cannot be specified using color names.</p> -</div> - -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p><code>accentcolor</code><code> {{Deprecated_Inline}}</code></p> - </td> - <td> - <div class="blockIndicator warning"> - <p><code>accentcolor</code> has been removed in Firefox 70. You will begin to get warnings in Firefox 65 and later if you load a theme that uses this property. Use the <code>frame</code> property instead.</p> - </div> - - <p>The color of the header area background, displayed in the part of the header not covered or visible through the images specified in <code>"headerURL"</code> and <code>"additional_backgrounds"</code>.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "accentcolor": "red", - "tab_background_text": "white" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15871/theme-accentcolor.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>bookmark_text</code></td> - <td> - <p>The color of text and icons in the bookmark and find bars. Also, if <code>tab_text</code> isn't defined it sets the color of the active tab text and if <code>icons</code> isn't defined the color of the toolbar icons. Provided as Chrome compatible alias for <code>toolbar_text</code>.</p> - - <div class="blockIndicator note"> - <p>Ensure any color used contrasts well with those used in <code>frame</code> and <code>frame_inactive</code> or <code>toolbar</code> if you're using that property.</p> - - <p>Where <code>icons</code> isn't defined, also ensure good contrast with<code> button_background_active</code> and <code>button_background_hover</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "tab_text": "white", - "toolbar": "black", - "bookmark_text": "red" - } -}</pre> - </details> - - <p><img alt="Example use of the bookmark_text color property" src="https://mdn.mozillademos.org/files/16668/theme-bookmark_text.png"></p> - </td> - </tr> - <tr> - <td><code>button_background_active</code></td> - <td> - <p>The color of the background of the pressed toolbar buttons.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "button_background_active": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15872/theme-button_background_active.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>button_background_hover</code></td> - <td> - <p>The color of the background of the toolbar buttons on hover.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "button_background_hover": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15873/theme-button_background_hover.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>icons</code></td> - <td> - <p>The color of toolbar icons, excluding those in the find toolbar.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with those used in <code>frame</code>, <code>frame_inactive</code>, <code>button_background_active</code>, and <code>button_background_hover</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "icons": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15874/theme-icons.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>icons_attention</code></td> - <td> - <p>The color of toolbar icons in attention state such as the starred bookmark icon or finished download icon.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with those used in <code>frame</code>, <code>frame_inactive</code>, <code>button_background_active</code>, and <code>button_background_hover</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "icons_attention": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15875/theme-icons_attention.png" style="height: 324px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>frame</code></td> - <td> - <p>The color of the header area background, displayed in the part of the header not covered or visible through the images specified in <code>"theme_frame"</code> and <code>"additional_backgrounds"</code>.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "red", - "tab_background_text": "white" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15871/theme-accentcolor.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>frame_inactive</code></td> - <td> - <p>The color of the header area background when the browser window is inactive, displayed in the part of the header not covered or visible through the images specified in <code>"theme_frame"</code> and <code>"additional_backgrounds"</code>.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "red", - "frame_inactive": "gray", - "tab_text": "white" - } -}</pre> - </details> - - <p><img alt="Example use of the frame_inactive color property" src="https://mdn.mozillademos.org/files/16669/theme-frame_inactive.png" style="height: 193px; width: 752px;"></p> - </td> - </tr> - <tr> - <td><code>ntp_background</code></td> - <td> - <p>The new tab page background color.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "ntp_background": "red", - "ntp_text": "white" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/16175/ntp_colors.png" style="display: block; height: 190px; margin: 0 auto;"></p> - </td> - </tr> - <tr> - <td><code>ntp_text</code></td> - <td> - <p>The new tab page text color.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with that used in <code>ntp_background</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "ntp_background": "red", - "ntp_text": "white" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/16175/ntp_colors.png" style="display: block; height: 190px; margin: 0 auto;"></p> - </td> - </tr> - <tr> - <td><code>popup</code></td> - <td> - <p>The background color of popups (such as the url bar dropdown and the arrow panels).</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "popup": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15876/theme-popup.png" style="height: 324px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>popup_border</code></td> - <td> - <p>The border color of popups.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "popup": "black", - "popup_text": "white", - "popup_border": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15877/theme-popup_border.png" style="height: 324px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>popup_highlight</code></td> - <td> - <p>The background color of items highlighted using the keyboard inside popups (such as the selected url bar dropdown item).</p> - - <div class="blockIndicator note"> - <p>It's recommended to define <code>popup_highlight_text</code> to override the browser default text color on various platforms.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "popup_highlight": "red", - "popup_highlight_text": "white" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15878/theme-popup_highlight.png" style="height: 490px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>popup_highlight_text</code></td> - <td> - <p>The text color of items highlighted inside popups.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with that used in <code>popup_highlight</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "popup_highlight": "black", - "popup_highlight_text": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15879/theme-popup_highlight_text.png" style="height: 490px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>popup_text</code></td> - <td> - <p>The text color of popups.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with that used in <code>popup</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "popup": "black", - "popup_text": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15880/popup_text.png" style="height: 490px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>sidebar</code></td> - <td> - <p>The background color of the sidebar.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "sidebar": "red", - "sidebar_highlight": "white", - "sidebar_highlight_text": "green", - "sidebar_text": "white" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/16176/sidebar_colors.png" style="display: block; margin: 0 auto; width: 250px;"></p> - </td> - </tr> - <tr> - <td><code>sidebar_border</code></td> - <td> - <p>The border and splitter color of the browser sidebar</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "sidebar_border": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/16177/Screen_Shot_2018-09-16_at_6.13.31_PM.png" style="display: block; height: 286px; margin: 0px auto; width: 300px;"></p> - </td> - </tr> - <tr> - <td><code>sidebar_highlight</code></td> - <td> - <p>The background color of highlighted rows in built-in sidebars</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "sidebar_highlight": "red", - "sidebar_highlight_text": "white" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/16223/Screen_Shot_2018-10-04_at_11.15.46_AM.png" style="display: block; height: 357px; margin: 0px auto; width: 269px;"></p> - </td> - </tr> - <tr> - <td><code>sidebar_highlight_text</code></td> - <td> - <p>The text color of highlighted rows in sidebars.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with that used in <code>sidebar_highlight</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "sidebar_highlight": "pink", - "sidebar_highlight_text": "red", - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/16224/Screen_Shot_2018-10-04_at_11.22.41_AM.png" style="display: block; height: 363px; margin: auto; width: 262px;"></p> - </td> - </tr> - <tr> - <td><code>sidebar_text</code></td> - <td> - <p>The text color of sidebars.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with that used in <code>sidebar</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "sidebar": "red", - "sidebar_highlight": "white", - "sidebar_highlight_text": "green", - "sidebar_text": "white" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/16176/sidebar_colors.png" style="display: block; margin: 0 auto; width: 250px;"></p> - </td> - </tr> - <tr> - <td><code>tab_background_separator</code></td> - <td> - <p>The color of the vertical separator of the background tabs.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "tab_background_separator": "red" - } -}</pre> - </details> - - <p><img alt="A closeup of browser tabs to highlight the separator." src="https://mdn.mozillademos.org/files/16048/theme-tab-background-separator.png" style="height: 356px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>tab_background_text</code></td> - <td> - <p>The color of the text displayed in the inactive page tabs. If <code>tab_text</code> or <code>bookmark_text</code> isn't specified, applies to the active tab text.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with those used in <code>tab_selected</code> or <code>frame</code> and <code>frame_inactive</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "toolbar": "white", - "tab_background_text": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15885/theme-textcolor.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>tab_line</code></td> - <td> - <p>The color of the selected tab line.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "tab_line": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15881/theme-tab_line.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>tab_loading</code></td> - <td> - <p>The color of the tab loading indicator and the tab loading burst.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "tab_loading": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15882/theme-tab_loading.gif" style="height: 186px; width: 618px;"></p> - </td> - </tr> - <tr> - <td><code>tab_selected</code></td> - <td> - <p>The background color of the selected tab. When not in use selected tab color is set by <code>frame</code> and the <code>frame_inactive</code>.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "images": { - "theme_frame": "weta.png" -}, - "colors": { - "frame": "black", - "tab_background_text": "white", - "tab_selected": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15883/theme-tab_selected.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>tab_text</code></td> - <td> - <p>From Firefox 59, it represents the text color for the selected tab. If <code>tab_line</code> isn't specified, it also defines the color of the selected tab line.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with those used in <code>tab_selected</code> or <code>frame</code> and <code>frame_inactive</code>.</p> - </div> - - <p>From Firefox 55 to 58, it is incorrectly implemented as alias for <code>"textcolor"</code></p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "images": { - "theme_frame": "weta.png" -}, - "colors": { - "frame": "black", - "tab_background_text": "white", - "tab_selected": "white", - "tab_text": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15884/theme-tab_text.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>textcolor {{Deprecated_Inline}}</code></td> - <td> - <div class="blockIndicator warning"> - <p><code>textcolor</code> has been removed in Firefox 70. You will begin to get warnings in Firefox 65 and later if you load a theme that uses this property. Use <code>tab_background_text</code> instead.</p> - </div> - - <p>The color of the text displayed in the header area.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "toolbar": "white", - "textcolor": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15885/theme-textcolor.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar</code></td> - <td> - <p>The background color for the navigation bar, the bookmarks bar, and the selected tab.</p> - - <p>This also sets the background color of the "Find" bar.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "toolbar": "red", - "tab_background_text": "white" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15966/toolbar.png" style="height: 335px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar_bottom_separator</code></td> - <td> - <p>The color of the line separating the bottom of the toolbar from the region below.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "toolbar_bottom_separator": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15887/theme-toolbar_bottom_separator.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar_field</code></td> - <td> - <p>The background color for fields in the toolbar, such as the URL bar.</p> - - <p>This also sets the background color of the <strong>Find in page</strong> field.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "toolbar_field": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15967/toolbar-field.png" style="height: 335px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar_field_border</code></td> - <td> - <p>The border color for fields in the toolbar.</p> - - <p>This also sets the border color of the <strong>Find in page</strong> field.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "toolbar": "black", - "tab_background_text": "white", - "toolbar_field": "black", - "toolbar_field_text": "white", - "toolbar_field_border": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15968/toolbar-field-border.png" style="height: 335px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar_field_border_focus</code></td> - <td> - <p>The focused border color for fields in the toolbar.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "toolbar": "black", - "tab_background_text": "white", - "toolbar_field": "black", - "toolbar_field_text": "white", - "toolbar_field_border_focus": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15890/theme-toolbar_field_border_focus.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar_field_focus</code></td> - <td> - <p>The focused background color for fields in the toolbar, such as the URL bar.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "toolbar": "black", - "tab_background_text": "white", - "toolbar_field": "black", - "toolbar_field_text": "white", - "toolbar_field_focus": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15891/theme-toolbar_field_focus.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar_field_highlight</code></td> - <td>The background color used to indicate the current selection of text in the URL bar (and the search bar, if it's configured to be separate). - <details open><summary>See example</summary> - <pre class="brush: json notranslate"> -"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)" - } -}</pre> - </details> - - <p><img alt="Example showing customized text and highlight colors in the URL bar" src="https://mdn.mozillademos.org/files/16632/toolbar_field_highlight.png" style="height: 289px; width: 738px;"></p> - - <p>Here, the <code>toolbar_field_highlight</code> field specifies that the highlight color is a light green, while the text is set to a dark-to-medium green using <code>toolbar_field_highlight_text</code>.</p> - </td> - </tr> - <tr> - <td><code>toolbar_field_highlight_text</code></td> - <td> - <p>The color used to draw text that's currently selected in the URL bar (and the search bar, if it's configured to be separate box).</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with those used in <code>toolbar_field_highlight</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"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)" - } -}</pre> - </details> - - <p><img alt="Example showing customized text and highlight colors in the URL bar" src="https://mdn.mozillademos.org/files/16632/toolbar_field_highlight.png" style="height: 289px; width: 738px;"></p> - - <p>Here, the <code>toolbar_field_highlight_text</code> field is used to set the text color to a dark medium-dark green, while the highlight color is a light green.</p> - </td> - </tr> - <tr> - </tr> - <tr> - <td><code>toolbar_field_separator</code></td> - <td> - <p>The color of separators inside the URL bar. In Firefox 58 this was implemented as <code>toolbar_vertical_separator</code>.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "toolbar": "black", - "tab_background_text": "white", - "toolbar_field_separator": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15895/theme-toolbar_field_separator.png" style="height: 302px; width: 738px;"></p> - - <p>In this screenshot, <code>"toolbar_vertical_separator"</code> is the white vertical line in the URL bar dividing the Reader Mode icon from the other icons.</p> - </td> - </tr> - <tr> - <td><code>toolbar_field_text</code></td> - <td> - <p>The color of text in fields in the toolbar, such as the URL bar. This also sets the color of text in the <strong>Find in page</strong> field.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with those used in <code>toolbar_field</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "toolbar": "black", - "tab_background_text": "white", - "toolbar_field": "black", - "toolbar_field_text": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15969/toolbar-field-text.png" style="height: 335px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar_field_text_focus</code></td> - <td> - <p>The color of text in focused fields in the toolbar, such as the URL bar.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with those used in <code>toolbar_field_focus</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "toolbar": "black", - "tab_background_text": "white", - "toolbar_field": "black", - "toolbar_field_text": "white", - "toolbar_field_text_focus": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15893/theme-toolbar_field_text_focus.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar_text </code></td> - <td> - <p>The color of toolbar text. This also sets the color of text in the "Find" bar.</p> - - <div class="blockIndicator note"> - <p>For compatibility with Chrome, use the alias <code>bookmark_text</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "toolbar": "black", - "toolbar_text": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15970/toolbar-text.png" style="height: 335px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar_top_separator</code></td> - <td> - <p>The color of the line separating the top of the toolbar from the region above.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "toolbar": "black", - "toolbar_top_separator": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15897/theme-toolbar_top_separator.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar_vertical_separator</code></td> - <td> - <p>The color of the separator next to the application menu icon. In Firefox 58, it corresponds to the color of separators inside the URL bar.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "toolbar": "black", - "toolbar_vertical_separator": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15898/theme-toolbar_vertical_separator.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - </tbody> -</table> - -<h4 id="Aliases">Aliases</h4> - -<p>Additionally, this key accepts various properties that are aliases for one of the properties above. These are provided for compatibility with Chrome. If an alias is given, and the non-alias version is also given, then the value will be taken from the non-alias version.</p> - -<div class="blockIndicator warning"> -<p>Beginning Firefox 70, the following properties are removed: <code>accentcolor</code> and <code>textcolor</code>. Use <code>frame</code> and <code>tab_background_text</code> instead. Using these values in themes loaded into Firefox 65 or later will raise warnings.</p> -</div> - -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Alias for</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>bookmark_text</code></td> - <td><code>toolbar_text</code></td> - </tr> - <tr> - <td><code>frame</code></td> - <td><code>accentcolor</code> <code>{{Deprecated_Inline}}</code></td> - </tr> - <tr> - <td><code>frame_inactive</code></td> - <td><code>accentcolor</code> <code>{{Deprecated_Inline}}</code></td> - </tr> - <tr> - <td><code>tab_background_text</code></td> - <td><code>textcolor</code> <code>{{Deprecated_Inline}}</code></td> - </tr> - </tbody> -</table> - -<h3 id="properties">properties</h3> - -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>additional_backgrounds_alignment</code></td> - <td> - <p><code>Array</code> of <code>String</code></p> - </td> - <td> - <p>Optional.</p> - - <p>An array of enumeration values defining the alignment of the corresponding <code>"additional_backgrounds":</code> array item.<br> - The alignment options include:</p> - - <ul> - <li><code>"bottom"</code></li> - <li><code>"center"</code></li> - <li><code>"left"</code></li> - <li><code>"right"</code></li> - <li><code>"top"</code></li> - <li><code>"center bottom"</code></li> - <li><code>"center center"</code></li> - <li><code>"center top"</code></li> - <li><code>"left bottom"</code></li> - <li><code>"left center"</code></li> - <li><code>"left top"</code></li> - <li><code>"right bottom"</code></li> - <li><code>"right center"</code></li> - <li><code>"right top"</code>.</li> - </ul> - - <p>If not specified, defaults to <code>"right top"</code>.</p> - </td> - </tr> - <tr> - <td><code>additional_backgrounds_tiling</code></td> - <td> - <p><code>Array</code> of <code>String</code></p> - </td> - <td> - <p>Optional.</p> - - <p>An array of enumeration values defining how the corresponding <code>"additional_backgrounds":</code> array item repeats. Options include:</p> - - <ul> - <li><code>"no-repeat"</code></li> - <li><code>"repeat"</code></li> - <li><code>"repeat-x"</code></li> - <li><code>"repeat-y"</code></li> - </ul> - - <p>If not specified, defaults to <code>"no-repeat"</code>.</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Examples">Examples</h2> - -<p dir="ltr" id="docs-internal-guid-f85f22a2-6854-24d7-769b-8a47c376e2f2">A basic theme must define an image to add to the header, the accent color to use in the header, and the color of text used in the header:</p> - -<pre class="brush: json notranslate" dir="ltr"> "theme": { - "images": { - "theme_frame": "images/sun.jpg" - }, - "colors": { - "frame": "#CF723F", - "tab_background_text": "#000" - } - }</pre> - -<p dir="ltr">Multiple images can be used to fill the header. Before Firefox version 60, use a blank or transparent header image to gain control over the placement of each additional image:</p> - -<pre class="brush: json notranslate" dir="ltr"> "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" - } - }</pre> - -<p dir="ltr">You can also fill the header with a repeated image, or images, in this case a single image anchored in the middle top of the header and repeated across the rest of the header:</p> - -<pre class="brush: json notranslate" dir="ltr"> "theme": { - "images": { - "additional_backgrounds": [ "images/logo.png"] - }, - "properties": { - "additional_backgrounds_alignment": [ "top" ], - "additional_backgrounds_tiling": [ "repeat" ] - }, - "colors": { - "frame": "green", - "tab_background_text": "#000" - } - }</pre> - -<p><a id="example-screenshot" name="example-screenshot">The following example uses most of the different values for <code>theme.colors</code>:</a></p> - -<pre class="brush: json notranslate"> "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" - } - }</pre> - -<p>It will give you a browser that looks like this:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/15789/theme.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 1446px;"></p> - -<p>In this screenshot, <code>"toolbar_vertical_separator"</code> is the white vertical line in the URL bar dividing the Reader Mode icon from the other icons.</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("webextensions.manifest.theme")}}</p> - -<h3 id="Colors">Colors</h3> - -<p>{{Compat("webextensions.manifest.theme.colors", 10)}}</p> - -<h3 id="Images">Images</h3> - -<p>{{Compat("webextensions.manifest.theme.images", 10)}}</p> - -<h3 id="Properties">Properties</h3> - -<p>{{Compat("webextensions.manifest.theme.properties", 10)}}</p> - -<h3 id="Chrome_compatibility">Chrome compatibility</h3> - -<p>In Chrome:</p> - -<ul> - <li><code>colors/toolbar_text</code> is not used, use <code>colors/bookmark_text</code> instead.</li> - <li><code>images/theme_frame</code> anchors the image to the top left of the header and if the image doesn’t fill the header area tile the image.</li> - <li>all colors must be specified as an array of RGB values, like this: - <pre class="brush: json notranslate">"theme": { - "colors": { - "frame": [255, 0, 0], - "tab_background_text": [0, 255, 0], - "bookmark_text": [0, 0, 255] - } -}</pre> - - <p>From Firefox 59 onward, both the array form and the CSS color form are accepted for all properties. Before that, <code>colors/frame</code> and <code>colors/tab_background_text</code> required the array form, while other properties required the CSS color form.</p> - </li> -</ul> |