aboutsummaryrefslogtreecommitdiff
path: root/files/fr/mozilla/add-ons/webextensions/manifest.json/theme/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/fr/mozilla/add-ons/webextensions/manifest.json/theme/index.html')
-rw-r--r--files/fr/mozilla/add-ons/webextensions/manifest.json/theme/index.html1374
1 files changed, 1374 insertions, 0 deletions
diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/theme/index.html b/files/fr/mozilla/add-ons/webextensions/manifest.json/theme/index.html
new file mode 100644
index 0000000000..d9f4187f08
--- /dev/null
+++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/theme/index.html
@@ -0,0 +1,1374 @@
+---
+title: theme
+slug: Mozilla/Add-ons/WebExtensions/manifest.json/theme
+tags:
+ - Add-ons
+ - Browser
+ - Customization
+ - Customize
+ - Design
+ - Look and Feel
+ - Themes
+ - colors
+ - theme manifest
+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">
+"theme": {
+ "images": {
+ "theme_frame": "images/sun.jpg"
+ },
+ "colors": {
+ "frame": "#CF723F",
+ "tab_background_text": "#000"
+ }
+}</pre>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<p>Utilisez la clé du thème pour définir un thème statique à appliquer à Firefox.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Si vous voulez inclure un thème avec une extension, veuillez voir l'API  {{WebExtAPIRef("theme")}}.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Depuis mai 2019, les thèmes doivent être signés pour être installés ({{bug(1545109)}}). Voir <a href="/fr/docs/Mozilla/Add-ons/Distribution">Signature et distribution votre extension</a> pour plus de détails.</p>
+</div>
+
+<div class="note">
+<p><strong>Prise en charge des thèmes dans Firefox pour Android</strong>: Une nouvelle version de Firefox pour Android, basée sur GeckoView, est en cours de développement. Une <a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix" rel="noreferrer nofollow">pré-version</a> ne support pas les thèmes.</p>
+</div>
+
+<h2 id="Formats_des_images">Formats des images</h2>
+
+<p>Les formats d'image suivants sont pris en charge dans toutes les propriétés de l'image du thème :</p>
+
+<ul>
+ <li>JPEG</li>
+ <li>PNG</li>
+ <li>APNG</li>
+ <li>SVG (SVG animé est pris en charge à partir de Firefox 59)</li>
+ <li>GIF (Le GIF animé n'est pas supporté)</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La clé du thème est un objet qui prend les propriétés suivantes:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Nom</th>
+ <th scope="col">Type</th>
+ <th scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>images</code></td>
+ <td><code>Objet</code></td>
+ <td>
+ <p>Facultatif à partir de Firefox 60. Obligatoire avant Firefox 60.</p>
+
+ <p>Un objet JSON dont les propriétés représentent les images à afficher dans différentes parties du navigateur. Voir les <code><a href="/fr/Add-ons/WebExtensions/manifest.json/theme#images">images</a></code> pour plus de détails sur les propriétés que cet objet peut contenir.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code>colors</code></td>
+ <td><code>Objet</code></td>
+ <td>
+ <p>Obligatoire.</p>
+
+ <p>Un objet JSON dont les propriétés représentent les couleurs de différentes parties du navigateur. Voir <code><a href="/fr/Add-ons/WebExtensions/manifest.json/theme#couleurs">couleurs</a></code> pour plus de détails sur les propriétés que cet objet peut contenir.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code>properties</code></td>
+ <td><code>Objet</code></td>
+ <td>
+ <p>Optionnel</p>
+
+ <p>This object has two properties that affect how the <code>"additional_backgrounds"</code> images are displayed. See <code><a href="/fr/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> un tableau énumérant les valeurs définissant l'alignement des éléments correspondants du tableau  <code>"additional_backgrounds":</code>.<br>
+ Les options d'alignement comprennent  : <code>"bottom" <em>(bas)</em></code>, <code>"center" <em>(centre)</em></code>, <code>"left" <em>(gauche)</em></code>, <code>"right" <em>(droite)</em></code>, <code>"top" <em>(haut)</em></code>, <code>"</code><code>center bottom</code><code>"</code><em>(centre bas)</em>, <code>"center center" <em>(centre milieu)</em></code>, <code>"center top" <em>(centre haut)</em></code>, <code>"left bottom" <em>(gauche bas)</em></code>, <code>"left center" <em>(gauche milieu)</em></code>, <code>"left top" <em>(gauche haut)</em></code>, <code>"right bottom" <em>(droite bas)</em></code>, <code>"right center" <em>(droite milieu)</em></code>, et <code>"right top" <em>(droite haut)</em></code>. Si elle n'est pas spécifiée, par défaut, <code>"right top"</code>.<br>
+ Facultatif</li>
+ <li><code>"additional_backgrounds_tiling":</code> un tableau énumérant les valeurs de répétition des éléments correspondants du tableau <code>"additional_backgrounds":</code>, avec le support de <code>"no-repeat" <em>(pas de répétition)</em></code>, <code>"repeat" <em>(répétition)</em></code>, <code>"repeat-x"</code> et <code>"repeat-y"</code>. Si elle n'est pas spécifiée, par défaut, "<code>no-repeat"</code>.<br>
+ Facultatif</li>
+ </ul>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="images">images</h3>
+
+<p>Toutes les URL sont relatives au fichier manifest.json et ne peuvent pas référencer une URL externe.</p>
+
+<p>Les images doivent avoir une hauteur de 200 pixels pour garantir qu'elles remplissent toujours l'espace d'en-tête verticalement.</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>
+ <p>headerURL <code>{{Deprecated_Inline}}</code></p>
+ </td>
+ <td><code>String</code></td>
+ <td>
+ <div class="blockIndicator warning">
+ <p><code>headerURL</code> a été supprimé dans Firefox 70. Vous commencerez à recevoir des avertissements dans Firefox 65 et plus tard si vous chargez un thème qui utilise cette propriété. Utilisez <code>theme_frame</code> à la place.</p>
+ </div>
+
+ <p>L'URL d'une image de premier plan doit être ajoutée à la zone d'en-tête et ancrée dans le coin supérieur droit de la zone d'en-tête.</p>
+
+ <p>En option à partir de Firefox 60. Un de <code>theme_frame</code> ou <code>headerURL</code> devait être spécifié avant Firefox 60. Notez également que dans Firefox 60 et suivants, tout {{cssxref("text-shadow")}} appliqué au texte d'en-tête est supprimé si aucun <code>headerURL</code> n'est spécifié (voir {{bug(1404688)}}).</p>
+
+ <p>Dans Firefox pour Android, <code>headerURL</code> ou <code>theme_frame</code> doit être spécifié.</p>
+
+ <ul>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><code>theme_frame</code></td>
+ <td><code>String</code></td>
+ <td>
+ <p>L'URL d'une image de premier plan doit être ajoutée à la zone d'en-tête et ancrée dans le coin supérieur droit de la zone d'en-tête.</p>
+
+ <div class="blockIndicator note">
+ <p>L'ancre de l'image en haut à gauche de l'en-tête pour Chrome et si l'image ne remplit pas la zone de l'en-tête, l'image sera en mosaïque.</p>
+ </div>
+
+ <p>Optionnel à partir de Firefox 60. Un de <code>theme_frame</code> ou <code>headerURL</code> devait être spécifié avant Firefox 60.</p>
+
+ <p>Dans Firefox pour Android, <code>headerURL</code> ou <code>theme_frame</code> doit être spécifié.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code>additional_backgrounds</code></td>
+ <td><code>Array </code>de <code>String</code></td>
+ <td>
+ <div class="warning">
+ <p>La propriété <code>additional_backgrounds</code> est experimentale.  Il est actuellement accepté dans les versions finale de Firefox, mais son comportement est sujet à changement.</p>
+ </div>
+
+ <p>Un tableau d'URLs pour les images de fond supplémentaires à ajouter à la zone d'en-tête et à afficher derrière l'image <code>"theme_frame"</code> :  Ces images superposent la première image du tableau en haut, la dernière image du tableau en bas.</p>
+
+ <p>Optionel.</p>
+
+ <p>Par défaut, toutes les images sont ancrées dans le coin supérieur droit de la zone d'en-tête, mais leur alignement et leur comportement répété peuvent être contrôlés par les propriétés des <code>"properties"</code>.</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="Couleurs">Couleurs</h3>
+
+<p>Ces propriétés définissent les couleurs utilisées pour les différentes parties du navigateur. Ils sont tous facultatifs (mais notez que <code>"accentcolor"</code> et <code>"textcolor"</code>  étaient obligatoires dans Firefox avant la version 63). L'effet de ces propriétés sur l'interface utilisateur de Firefox est présenté ici:</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>Lorsqu'un composant est affecté par plusieurs propriétés de couleur, les propriétés sont listées par ordre de priorité.</p>
+</div>
+
+<p>Toutes ces propriétés peuvent être spécifiées sous la forme d'une chaîne contenant un <a href="/fr/docs/Web/CSS/color_value">code de couleur CSS</a>, ou un tableau RVB tel que <code>"tab_background_text": [ 107 , 99 , 23 ]</code>, ou en héxadécimal, tel que <code>"tab_background_text": #6b6317</code>.</p>
+
+<div class="blockIndicator note">
+<p><a href="/fr/Add-ons/WebExtensions/manifest.json/theme#Chrome_compatibility">Dans Chrome, les couleurs ne peuvent être spécifiées que sous forme de tableau RVB</a>.</p>
+
+<p>Dans Firefox pour Android, les couleurs peuvent être spécifiées en utilisant:</p>
+
+<ul>
+ <li>La notation hexadecimale complète, c'est à dire #RRGGBB uniquement. Les syntaxes <em>alpha</em> et abrégée, comme dans #RGB[A], ne sont pas supportées.</li>
+ <li><a href="/fr/docs/Web/CSS/Type_color#Syntaxe">Notation fonctionnelle</a> (tableau RVB) pour les thèmes ciblant Firefox 68.2 ou supérieur.</li>
+</ul>
+
+<p>Les couleurs pour les thèmes Firefox pour Android ne peuvent pas être spécifiées à l'aide des noms de couleurs.</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><code>accentcolor</code><code> {{Deprecated_Inline}}</code></td>
+ <td>
+ <div class="blockIndicator warning">
+ <p><code>accentcolor</code> a été supprimé dans Firefox 70. Vous commencerez à recevoir des avertissements dans Firefox 65 et plus tard si vous chargez un thème qui utilise cette propriété. Utilisez  <code>frame</code> à la place.</p>
+ </div>
+
+ <p>La couleur de l'arrière-plan de la zone d'en-tête, affichée dans l'en-tête quand il n'est pas couvert ou reste visible à travers les images spécifiées dans <code>"headerURL"</code> et <code>"additional_backgrounds"</code>.</p>
+
+ <details><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur du texte et des icônes dans le signet et les barres de recherche. De plus, si <code>tab_text</code> n'est pas défini, il définit la couleur du texte de l'onglet actif et si les <code>icons</code> ne sont pas définies, la couleur des icônes de la barre d'outils. Fourni en tant qu'alias compatible Chrome pour l'outils <code>toolbar_text</code>.</p>
+
+ <div class="blockIndicator note">
+ <p>Assurez-vous que toute couleur utilisée contraste bien avec celles utilisées dans <code>frame</code> et <code>frame_inactive</code> ou <code>toolbar</code> si vous utilisez cette propriété.</p>
+
+ <p>Là où les <code>icons</code> ne sont pas définis, assurez-vous également d'un bon contraste avec <code>button_background_active</code> et <code>button_background_hover</code>.</p>
+ </div>
+
+ <details><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"theme": {
+ "colors": {
+ "frame": "black",
+ "tab_background_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>La couleur de l'arrière-plan des boutons de la barre d'outils.</p>
+
+ <details><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur de l'arrière-plan des boutons de la barre d'outils au survol.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur des icônes de la barre d'outils, à l'exclusion de celles de la barre d'outils de recherche.</p>
+
+ <div class="blockIndicator note">
+ <p>Assurez-vous que la couleur utilisée contraste bien avec celles utilisées dans <code>frame</code>,  <code>frame_inactive</code>, <code>button_background_active</code>, et  <code>button_background_hover</code>.</p>
+ </div>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur des icônes de la barre d'outils dans l'état d'attention comme l'icône de signet étoilé ou l'icône de téléchargement terminé.</p>
+
+ <div class="blockIndicator note">
+ <p>Assurez-vous que la couleur utilisée contraste bien avec celles utilisées dans <code>frame</code>,  <code>frame_inactive</code>, <code>button_background_active</code>, et  <code>button_background_hover</code>.</p>
+ </div>
+
+ <details><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur de l'arrière-plan de la zone d'en-tête, affichée dans la partie de l'en-tête non couverte ou visible à travers les images spécifiées dans <code>"theme_frame"</code> et <code>"additional_backgrounds"</code>.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur de l'arrière-plan de la zone d'en-tête quand la fenêtre du navigateur est inactive, affichée dans la partie de l'en-tête non couverte ou visible à travers les images spécifiées dans <code>"theme_frame"</code> et <code>"additional_backgrounds"</code>.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La nouvelle couleur d'arrière-plan de la page à onglet.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur du texte de la page nouvel onglet.</p>
+
+ <div class="blockIndicator note">
+ <p>Assurez-vous que la couleur utilisée contraste bien avec celle utilisée dans  <code>ntp_background</code>.</p>
+ </div>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur d'arrière-plan des popups (telles que la liste déroulante de la barre d'adresse et les menus avec une flèche)</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur de la bordure des popups.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur d'arrière-plan des éléments mis en surbrillance à l'aide du clavier dans les fenêtre contextuelles (tel que l’élément sélectionné dans le menu déroulant de la barre d'URL).</p>
+
+ <div class="blockIndicator note">
+ <p>Il est recommandé de définir <code>popup_highlight_text</code> pour remplacer la couleur de texte par défaut du navigateur sur différentes plateformes.</p>
+ </div>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur du texte des éléments mis en surbrillance dans les fenêtres contextuelles.</p>
+
+ <div class="blockIndicator note">
+ <p>S'assurer que la couleur utilisée contraste bien avec celle utilisée dans <code>popup_highlight</code>.</p>
+ </div>
+
+ <details><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur du texte des popups.</p>
+
+ <div class="blockIndicator note">
+ <p>S'assurer que la couleur utilisée contraste bien avec celle utilisée dans <code>popup</code>.</p>
+ </div>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur de fond des barres latérales intégrées.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur de la bordure et du séparateur de la barre latérale du navigateur.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur d'arrière-plan des lignes en surbrillance dans les barres latérales intégrées.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur du texte des lignes en surbrillance dans les barres latérales intégrées.</p>
+
+ <div class="blockIndicator note">
+ <p>S'assurer que la couleur utilisée contraste bien avec celle utilisée dans <code>sidebar_highlight</code>.</p>
+ </div>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur du texte des barres latérales intégrées.</p>
+
+ <div class="blockIndicator note">
+ <p>S'assurer que la couleur utilisée contraste bien avec celle utilisée dans <code>sidebar</code>.</p>
+ </div>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur du séparateur vertical des onglets d'arrière-plan.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur du texte affiché dans les onglets des pages inactives. Si <code>tab_text</code> ou <code>bookmark_text</code> n'est pas spécifié, s'applique au texte de l'onglet actif.</p>
+
+ <div class="blockIndicator note">
+ <p>Assurez-vous que la couleur utilisée contraste bien avec celles utilisées dans  <code>tab_selected</code> ou <code>frame</code> et  <code>frame_inactive</code>.</p>
+ </div>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur de la ligne de l'onglet sélectionnée.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"theme": {
+ "colors": {
+ "frame": "black",
+ "tab_bckground_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>La couleur de l'indicateur de chargement de l'onglet et de l'effet de vague.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur de fond de l'onglet sélectionné. Lorsqu'elle n'est pas utilisée, la couleur de l'onglet sélectionné est définie par <code>frame</code> et <code>frame_inactive</code>.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>Depuis Firefox 59, il représente la couleur du texte de l'onglet sélectionné. Si <code>tab_line</code> n'est pas spécifié, il définit également la couleur de la ligne de tabulation sélectionnée.</p>
+
+ <div class="blockIndicator note">
+ <p>Assurez-vous que la couleur utilisée contraste bien avec celles utilisées dans  <code>tab_selected</code> ou <code>frame</code> et  <code>frame_inactive</code>.</p>
+ </div>
+
+ <p>De Firefox 55 à 58, il est incorrectement implémenté comme alias pour <code>"textcolor"</code></p>
+
+ <details><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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> a été supprimé dans Firefox 70. Vous commencerez à recevoir des avertissements dans Firefox 65 et plus tard si vous chargez un thème qui utilise cette propriété. Utilisez <code>tab_text</code> à la place.</p>
+ </div>
+
+ <p>La couleur du texte affiché dans la zone d'en-tête.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur de fond de la barre de navigation, de la barre de signets et de l'onglet sélectionné.</p>
+
+ <p>Ceci définit également la couleur de fond de la barre "Rechercher".</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur de la ligne séparant le bas de la barre d'outils de la région en dessous.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur d'arrière-plan des champs de la barre d'outils, comme la barre URL.</p>
+
+ <p>Ceci définit également la couleur de fond du champ Rechercher dans la page.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur de la bordure des champs de la barre d'outils.</p>
+
+ <p>Ceci définit également la couleur de fond du champ Rechercher dans la page.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur de bordure pour les champs de la barre d'outils qui ont le focus.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur de fond pour les champs de la barre d'outils qui ont le focus, tels que la barre d'URL.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur d'arrière-plan utilisée pour indiquer la sélection actuelle du texte dans la barre URL (et la barre de recherche, si elle est configurée pour être séparée).
+ <details open><summary>See example</summary>
+ <pre class="brush: json">
+"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>Ici, le champ <code>toolbar_field_highlight</code> spécifie que la couleur de surbrillance est un vert clair, alors que le texte est réglé sur un vert foncé à vert moyen en utilisant le texte  <code>toolbar_field_highlight_text</code>.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code>toolbar_field_highlight_text</code></td>
+ <td>
+ <p>La couleur utilisée pour dessiner le texte actuellement sélectionné dans la barre d'URL (et la barre de recherche, si elle est configurée comme boîte séparée).</p>
+
+ <div class="blockIndicator note">
+ <p>S'assurer que la couleur utilisée contraste bien avec celles utilisées dans  <code>toolbar_field_highlight</code>.</p>
+ </div>
+
+ <details open><summary>See example</summary>
+
+ <pre class="brush: json">
+"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>Ici, le champ <code>toolbar_field_highlight_text</code> permet de régler la couleur du texte sur un vert foncé moyen foncé, tandis que la couleur de surbrillance est un vert clair.</p>
+ </td>
+ </tr>
+ <tr>
+ </tr>
+ <tr>
+ <td><code>toolbar_field_separator</code></td>
+ <td>
+ <p>La couleur des séparateurs à l'intérieur de la barre d'URL. Dans Firefox 58, cela a été implémenté en tant que <code>toolbar_vertical_separator</code>.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>Dans cette capture d'écran, <code>"toolbar_vertical_separator"</code> est la ligne verticale blanche dans la barre URL qui sépare l'icône du mode lecture des autres icônes.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code>toolbar_field_text</code></td>
+ <td>
+ <p>La couleur du texte dans les champs de la barre d'outils, comme la barre URL. Ceci définit également la couleur du texte dans le champ Rechercher dans la page.</p>
+
+ <div class="blockIndicator note">
+ <p>Assurez-vous que la couleur utilisée contraste bien avec celles utilisées dans  <code>toolbar_field</code>.</p>
+ </div>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur du texte dans les champs de la barre d'outils qui ont le focus, tels que la barre d'URL.</p>
+
+ <div class="blockIndicator note">
+ <p>Assurez-vous que la couleur utilisée contraste bien avec celles utilisées dans  <code>toolbar_field_focus</code>.</p>
+ </div>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur du texte de la barre d'outils. Ceci définit également la couleur du texte dans la barre "Rechercher".</p>
+
+ <div class="blockIndicator note">
+ <p>Pour la compatibilité avec Chrome, utilisez l'alias <code>bookmark_text</code>.</p>
+ </div>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur de la ligne séparant le bas de la barre d'outils de la région en dessous.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>La couleur du séparateur à côté de l'icône du menu d'application. Dans Firefox 58, il correspond à la couleur des séparateurs dans la barre d'URL.</p>
+
+ <details open><summary>Voir exemple</summary>
+
+ <pre class="brush: json">
+"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>En outre, cette clé accepte diverses propriétés qui sont des alias pour l'une des propriétés ci-dessus. Ceux-ci sont fournis pour la compatibilité avec Chrome. Si un alias est donné et que la version non-alias est également donnée, alors la valeur sera tirée de la version non-alias.</p>
+
+<div class="blockIndicator warning">
+<p>A partir de Firefox 70, les propriétés suivantes sont supprimées : <code>accentcolor</code> et <code>textcolor</code>. Utilisez à la place <code>frame</code> et <code>tab_background_text</code>. L'utilisation de ces valeurs dans des thèmes chargés dans Firefox 65 ou une version ultérieure augmentera les avertissements.</p>
+</div>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Nom</th>
+ <th scope="col">Alias pour</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>bookmark_text</code></td>
+ <td><code>toolbar_text {{Deprecated_Inline}}</code></td>
+ </tr>
+ <tr>
+ <td><code>frame</code></td>
+ <td><code>accentcolor {{Deprecated_Inline}}</code></td>
+ </tr>
+ <tr>
+ <td><code>frame_inactive</code></td>
+ <td><code>accentcolor {{Deprecated_Inline}}</code></td>
+ </tr>
+ <tr>
+ <td><code>tab_background_text</code></td>
+ <td><code>textcolor {{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>Optionel.</p>
+
+ <p>Un tableau de valeurs d'énumération définissant l'alignement de l'élément <code>"additional_backgrounds":</code> élément de tableau.<br>
+ Les options d'alignement comprennent:</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>Si non spécifié, par default <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>Un tableau de valeurs d'énumérations définissant, comme l'élément de tableau  <code>"additional_backgrounds":</code> correspondant de répétition. Les options comprennent :</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>Si non spécifié, par default <code>"no-repeat"</code>.</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Un thème de base doit définir une image à ajouter à l'en-tête, la couleur d'accent à utiliser dans l'en-tête et la couleur du texte utilisée dans l'en-tête:</p>
+
+<pre class="brush: json" dir="ltr"> "theme": {
+ "images": {
+ "theme_frame": "images/sun.jpg"
+ },
+ "colors": {
+ "frame": "#CF723F",
+ "tab_background_text": "#000"
+ }
+ }</pre>
+
+<p dir="ltr"><span id="result_box" lang="fr"><span>Plusieurs images peuvent être utilisées pour remplir l'en-tête</span></span>, <span id="result_box" lang="fr"><span>en utilisant une image d'en-tête vierge/transparente pour donner le contrôle de l'emplacement à chaque image visible:</span></span></p>
+
+<pre class="brush: json" dir="ltr"> "theme": {
+ "images": {
+ "headerURL": "images/blank.png",
+ "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>Vous pouvez également remplir l'en-tête avec une image répétée, ou des images, dans ce cas, une seule image ancrée dans le milieu du haut de l'en-tête et répétée sur le reste de l'en-tête:</p>
+
+<pre class="brush: json" 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>L'exemple suivant utilise la plupart des différentes valeurs de <code>"theme.colors"</code>:</p>
+
+<pre class="brush: json"> "theme": {
+ "images": {
+ "theme_frame": "weta.png"
+ },
+
+ "colors": {
+ "accentcolor": "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>Il vous donnera un navigateur qui ressemble à ceci :</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>Dans cette capture d'écran, <code>"toolbar_vertical_separator"</code> est la ligne verticale blanche dans la barre d'URL divisant l'icône du mode Lecteur des autres icônes.</p>
+
+<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.manifest.theme")}}</p>
+
+<h3 id="Couleurs_2">Couleurs</h3>
+
+<p>{{Compat("webextensions.manifest.theme.colors", 10)}}</p>
+
+<h3 id="Images">Images</h3>
+
+<p>{{Compat("webextensions.manifest.theme.images", 10)}}</p>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<p>{{Compat("webextensions.manifest.theme.properties", 10)}}</p>
+
+<h3 id="Compatibilité_de_Chrome">Compatibilité de Chrome</h3>
+
+<p>Dans Chrome:</p>
+
+<ul>
+ <li><code>colors/toolbar_text</code> n'est pas utilisé, utilisez <code>colors/bookmark_text</code> à la place.</li>
+ <li><code>images/theme_frame</code> ancre l'image en haut à gauche de l'en-tête et si l'image ne remplit pas la zone de l'en-tête de l'image.</li>
+ <li>toutes les couleurs doivent être spécifiées sous la forme d'un tableau de valeurs RVB, comme ceci :</li>
+</ul>
+
+<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"theme":</span> <span class="punctuation token">{</span>
+ <span class="key token">"colors":</span> <span class="punctuation token">{</span>
+ <span class="key token">"frame":</span> <span class="punctuation token">[</span><span class="number token">255</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">,</span>
+ <span class="key token">"tab_background_text":</span> <span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">255</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">,</span>
+ <span class="key token">"bookmark_text":</span> <span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">255</span><span class="punctuation token">]</span>
+ <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>A partir de Firefox 59, la forme tableau et la forme couleur CSS sont acceptées pour toutes les propriétés. Avant cela, <code>colors/frame</code> et <code>colors/tab_background_text</code> nécessitaient la forme tableau, alors que d'autres propriétés nécessitaient la forme couleur CSS.</p>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2025-01-21 06:45:45 +0000