1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
|
---
title: theme expérimentation
slug: Mozilla/Add-ons/WebExtensions/manifest.json/theme_experiment
tags:
- Add-ons
- Browser
- Customisation
- Customise
- Design
- Look and Feel
- Themes
- colors
- navigatuer
- theme manifest
translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/theme_experiment
original_slug: Mozilla/Add-ons/WebExtensions/manifest.json/theme_experimentation
---
<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">Obligatoire</th>
<td>Non</td>
</tr>
<tr>
<th scope="row">Exemple</th>
<td>
<pre class="brush: json">
"theme_experiment": {
"stylesheet": "style.css",
"colors": {
"popup_affordance": "--arrowpanel-dimmed"
},
"images": {
"theme_toolbar": "--toolbar-bgimage"
},
"properties": {
"toolbar_image_alignment":
"--toolbar-bgalignment"
}
}</pre>
</td>
</tr>
</tbody>
</table>
<div class="cl-preview-section">
<p>Cette clé permet de définir les propriétés de la clé expérimentale de <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">theme</a></code> pour l'interface Firefox. Ces expériences sont un précurseur pour proposer de nouvelles fonctionnalités thématiques à inclure dans Firefox. L'expérimentation se fait par:</p>
</div>
<div class="cl-preview-section">
<ul>
<li>créer une feuille de style qui définit les correspondances entre les sélecteurs CSS internes pour les éléments d'interface utilisateur Firefox et les variables CSS arbitraires. Les variables CSS sont ensuite mappées dans les objets <code>colors</code>, <code>images</code>, et <code>properties</code> avec les nouvelles propriétés de clé de <code>theme</code>.</li>
<li>(sans feuille de style) en utilisant <code>colors</code>, <code>images</code>, et <code>properties</code> pour mapper les sélecteurs CSS internes de Firefox, tels que <code>--arrowpanel-dimmed</code> vers les nouvelles propriétés de clé de <code>theme</code> key properties. Cette option limite l'expérimentation aux composants d'interface utilisateur associés à une variable CSS intégrée.</li>
</ul>
</div>
<div class="cl-preview-section">
<p>Pour découvrir les sélecteurs CSS des éléments de l'interface utilisateur Firefox ou des variables CSS internes de Firefox, utilise la <a href="/fr/docs/Outils/Boîte_à_outils_du_navigateur">boite à outils du navigateur</a>.</p>
</div>
<div class="cl-preview-section">
<div class="blockIndicator note">
<p>Cette clé est uniquement disponible pour une utilisation dans les canaux Firefox Developer Edition et Firefox Nightly et nécessite l'activation de la préférence <code>extensions.legacy.enabled</code>.</p>
</div>
</div>
<div class="cl-preview-section">
<div class="blockIndicator warning">
<p>Cette fonctionnalité est expérimentale et peut être sujette à modification.</p>
</div>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<p>La clé theme_experiment 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>stylesheet</code></td>
<td><code>String</code></td>
<td>
<p>Facultatif</p>
<p>Nom d'une feuille de style fournissant le mappage des sélecteurs CSS des éléments de l'interface Firefox aux variables CSS.</p>
</td>
</tr>
<tr>
<td><code>images</code></td>
<td><code>Object</code></td>
<td>
<p>Facultatif</p>
<p>Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la <code>stylesheet</code>) aux noms de propriétés <code>images</code> à utiliser dans la clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">theme</a></code>.</p>
</td>
</tr>
<tr>
<td><code>colors</code></td>
<td><code>Object</code></td>
<td>
<p>Facultatif</p>
<p>Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la <code>stylesheet</code>) aux noms de propriétés <code>colors</code> à utiliser dans la clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">theme</a></code>.</p>
</td>
</tr>
<tr>
<td><code>properties</code></td>
<td><code>Object</code></td>
<td>
<p>Facultatif</p>
<p>Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la <code>stylesheet</code>) aux noms de propriétés <code>properties</code> à utiliser dans la clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">theme</a></code>.</p>
</td>
</tr>
</tbody>
</table>
<h2 id="Exemples">Exemples</h2>
<div class="cl-preview-section">
<p>Ces exemples utilisent une feuille de style appelée <code>style.css</code> pour permettre de définir une couleur pour le bouton de recharge du navigateur dans la clé <code><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">theme</a></code>.</p>
</div>
<div class="cl-preview-section">
<p>La feuille de style définit :</p>
</div>
<div class="cl-preview-section">
<pre><code>#reload-button {
fill: var(--reload-button-color);
}
</code></pre>
</div>
<div class="cl-preview-section">
<p>où <code>#reload-button</code> est le sélecteur CSS interne de Firefox pour le bouton reload et <code>--reload-button-color</code> est un nom arbitraire..</p>
</div>
<div class="cl-preview-section">
<p>Dans le fichier <code>manifest.json</code>, <code>--reload-button-color</code> est alors mappé au nom à utiliser dans la propriété <code>theme</code> <code>colors</code> :</p>
</div>
<div class="cl-preview-section">
<pre><code>"theme_experiment": {
"stylesheet": "style.css",
"colors": {
"reload_button": "--reload-button-color"
}
}
</code></pre>
</div>
<div class="cl-preview-section">
<p>L'argument <code>reload_button</code> est alors utilisé de la même manière que n'importe quelle autre propriété de <code>theme</code> .</p>
</div>
<div class="cl-preview-section">
<pre><code>"theme": {
"colors": {
"reload_button": "orange"
}
}
</code></pre>
</div>
<div class="cl-preview-section">
<p>Ceci a pour effet de rendre l'icône de recharge orange.</p>
</div>
<div class="cl-preview-section"><img alt="Outcome of a theme experiment, showing the reload button colored orange." src="https://mdn.mozillademos.org/files/16892/theme_experiment.png" style="height: 110px; width: 241px;"></div>
<div class="cl-preview-section"></div>
<div class="cl-preview-section">
<p>Cette propriété peut également être utilisée dans <code>browser.theme.update()</code>. <code>images</code> et <code>properties</code> travaillent de la même manière que <code>colors</code>.</p>
</div>
<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
<p>{{Compat("webextensions.manifest.theme_experiment")}}</p>
|
