Notez que vous ne pouvez pas encore soumettre des thèmes statiques basés sur WebExtension à addons.mozilla.org. Le travail pour soutenir ceci est suivi dans  https://github.com/mozilla/addons/issues/501. Si vous souhaitez partager un thème avec d'autres utilisateurs, vous devez en faire un thème léger ou un  thème dynamique.

Type Objet
Obligatoire Non
Exemple
"theme": {
  "images": {
    "headerURL": "images/sun.jpg"
  },
  "colors": {
    "accentcolor": "#CF723F",
    "textcolor": "#000"
  }
}

Utilisez la clé du thème pour définir un thème statique à appliquer à Firefox.

Si votre fichier manifest.json inclut la clé thème, l'extension est supposée être un thème et toute autre clé WebExtension est ignorée. Si vous souhaitez inclure un thème avec une extension, consultez l'API theme.

Formats des images

Les formats d'image suivants sont pris en charge dans toutes les propriétés de l'image du thème :

  • JPEG
  • PNG
  • APNG
  • SVG (SVG animé est pris en charge à partir de Firefox 59)
  • GIF (Le GIF animé n'est pas supporté)

Syntaxe

La clé du thème est un objet qui prend les propriétés suivantes:

Nom Type Description
images Objet

Facultatif à partir de Firefox 60. Obligatoire avant Firefox 60.

Un objet JSON dont les propriétés représentent les images à afficher dans différentes parties du navigateur. Voir les images pour plus de détails sur les propriétés que cet objet peut contenir.

colors Objet

Obligatoire.

Un objet JSON dont les propriétés représentent les couleurs de différentes parties du navigateur. Voir couleurs pour plus de détails sur les propriétés que cet objet peut contenir.

properties Objet

Optionnel

This object has two properties that affect how the "additional_backgrounds" images are displayed. See properties for details on the properties that this object can contain.

  • "additional_backgrounds_alignment": un tableau énumérant les valeurs définissant l'alignement des éléments correspondants du tableau  "additional_backgrounds":.
    Les options d'alignement comprennent  : "bottom" (bas), "center" (centre), "left" (gauche), "right" (droite), "top" (haut), "center bottom"(centre bas), "center center" (centre milieu), "center top" (centre haut), "left bottom" (gauche bas), "left center" (gauche milieu), "left top" (gauche haut), "right bottom" (droite bas), "right center" (droite milieu), et "right top" (droite haut). Si elle n'est pas spécifiée, par défaut, "left top".
    Facultatif
  • "additional_backgrounds_tiling": un tableau énumérant les valeurs de répétition des éléments correspondants du tableau "additional_backgrounds":, avec le support de "no-repeat" (pas de répétition), "repeat" (répétition), "repeat-x" et "repeat-y". Si elle n'est pas spécifiée, par défaut, "no-repeat".
    Facultatif

images

Toutes les URL sont relatives au fichier manifest.json et ne peuvent pas référencer une URL externe.

Les images doivent avoir une hauteur de 200 pixels pour garantir qu'elles remplissent toujours l'espace d'en-tête verticalement.

Name Type Description
headerURL String

Entièrement optionnel à partir de Firefox 60. L'une des options theme_frame ou headerURL devait être spécifiée avant Firefox 60. Notez également qu'à partir de Firefox 60, tout text-shadow appliqué au texte de l'en-tête est supprimé si aucun  headerURL n'est spécifié (voir bug 1404688).

L'URL d'une image de premier plan à ajouter à la zone d'en-tête et ancrée dans le coin supérieur droit de la zone d'en-tête.

theme_frame String

Optionnel à partir de Firefox 60. Un de theme_frame ou headerURL devait être spécifié avant Firefox 60.

Alias de headerURL, fourni pour la compatibilité Chrome.

additional_backgrounds Array de String

Optionel.

Un tableau d'URL pour les images d'arrière-plan supplémentaires à ajouter à la zone d'en-tête et affiché derrière l'image "headerURL": Ces images superposent la première image du tableau en haut, la dernière image du tableau en bas.

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 "properties":.

Couleurs

Ces propriétés définissent les couleurs utilisées pour différentes parties du navigateur. Ils sont tous facultatifs sauf "accentcolor" et "textcolor" où ces propriétés ou leurs contreparties chromées doivent être spécifiées.

Toutes ces propriétés peuvent être spécifiées sous la forme d'une chaîne contenant un code de couleur CSS, ou un tableau RVB tel que "tab_text": [ 107 , 99 , 23 ], ou en héxadécimal, tel que "tab_text": #6b6317. Notez toutefois que dans Chrome, les couleurs peuvent uniquement être spécifiées en tant que matrice RVB.

Voir l'exemple de capture écran ci-dessus pour comprendre les parties de l'interface utilisateur du navigateur qui sont affectées par ces propriétés.

Name Description
accentcolor

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 "headerURL" et  "additional_backgrounds".

Voir exemple
"theme": {
  "colors": {
     "accentcolor": "red",
     "textcolor": "white"
  }
}

button_background_active

La couleur de l'arrière-plan des boutons de la barre d'outils.

Voir exemple
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "button_background_active": "red"
  }
}

button_background_hover

La couleur de l'arrière-plan des boutons de la barre d'outils sur le vol stationnaire.

Voir exemple
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "button_background_hover": "red"
  }
}

icons

La couleur des icônes de la barre d'outils

Voir exemple
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "icons": "red"
  }
}

icons_attention

La couleur des icônes de la barre d'outils dans l'état de l'attention, telle que l'icône de signet favori ou l'icône de téléchargement terminée.

Voir exemple
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "icons_attention": "red"
  }
}

popup

La couleur d'arrière-plan des fenêtres contextuelles (telles que la liste déroulante de la barre d'adresse et les panneaux de flèche)

Voir exemple
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "popup": "red"
  }
}

popup_border

La couleur de la bordure des popups.

Voir exemple
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "popup": "black",
     "popup_text": "white",
     "popup_border": "red"
  }
}

popup_highlight

La couleur d'arrière-plan des éléments mis en surbrillance à l'aide des fenêtres contextuelles du clavier (telles que l'élément déroulant de la barre d'URL sélectionnée).

Voir exemple
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "popup_highlight": "red"
  }
}

popup_highlight_text

La couleur du texte des éléments mis en surbrillance à l'aide du clavier à l'intérieur des fenêtres contextuelles.

Voir exemple
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "popup_highlight": "black",
     "popup_highlight_text": "red"
  }
}

popup_text

La couleur du texte des popups.

Voir exemple
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "popup": "black",
     "popup_text": "red"
  }
}

tab_line

La couleur de la ligne d'onglet sélectionnée.

Voir exemple
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "tab_line": "red"
  }
}

tab_loading

La couleur de l'indicateur de chargement de l'onglet et de l'onglet de chargement en rafale.

Voir exemple
"theme": {
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "tab_loading": "red"
  }
}
tab_selected

La couleur d'arrière-plan de l'onglet sélectionné.

Voir exemple
"theme": {
  "images": {
  "headerURL": "weta.png"
},
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "tab_selected": "red"
  }
}

tab_text

A partir de Firefox 59, la couleur du texte l'onglet sélectionné.

De Firefox 55 à 58, un alias de "textcolor" pour la  compatibilité avec Chrome.

Voir exemple
"theme": {
  "images": {
  "headerURL": "weta.png"
},
  "colors": {
     "accentcolor": "black",
     "textcolor": "white",
     "tab_selected": "white",
     "tab_text": "red"
  }
}

textcolor

La couleur du texte affiché dans la zone d'en-tête.

Voir exemple
"theme": {
  "colors": {
    "accentcolor": "black",
    "toolbar": "white",
    "textcolor": "red"
  }
}

toolbar

La couleur de l'arrière-plan de la barre de navigation, de la  barre de favoris et de l'onglet sélectionné

Voir exemple
"theme": {
  "colors": {
    "accentcolor": "black",
    "toolbar": "red",
    "textcolor": "white"
  }
}

toolbar_bottom_separator

La couleur de la ligne séparant le bas de la barre d'outils de la région ci-dessous

Voir exemple
"theme": {
  "colors": {
    "accentcolor": "black",
    "textcolor": "white",
    "toolbar_bottom_separator": "red"
  }
}

toolbar_field

La couleur de l'arrière-plan des champs dans la barre d'outils

Voir exemple
"theme": {
  "colors": {
    "accentcolor": "black",
    "textcolor": "white",
    "toolbar_field": "red"
  }
}

toolbar_field_border

La couleur de la bordure pour les champs de la barre d'outils.

Voir exemple
"theme": {
  "colors": {
    "accentcolor": "black",
    "toolbar": "black",
    "textcolor": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_border": "red"
  }
}

toolbar_field_border_focus

La couleur de bordure ciblée pour les champs de la barre d'outils.

Voir exemple
"theme": {
  "colors": {
    "accentcolor": "black",
    "toolbar": "black",
    "textcolor": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_border_focus": "red"
  }
}

toolbar_field_focus

La couleur de fond ciblée pour les champs de la barre d'outils, tels que la barre d'URL

Voir exemple
"theme": {
  "colors": {
    "accentcolor": "black",
    "toolbar": "black",
    "textcolor": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_focus": "red"
  }
}

toolbar_field_text

la couleur du texte des champs de la barre d'outils, tels que la barre d'URL

Voir exemple
"theme": {
  "colors": {
    "accentcolor": "black",
    "toolbar": "black",
    "textcolor": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "red"
  }
}

toolbar_field_text_focus

La couleur du texte dans les champs ciblés de la barre d'outils, tels que la barre d'URL.

Voir exemple
"theme": {
  "colors": {
    "accentcolor": "black",
    "toolbar": "black",
    "textcolor": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "white",
    "toolbar_field_text_focus": "red"
  }
}

toolbar_field_separator

La couleur des séparateurs à l'intérieur de la barre d'URL, dans Firefox 58, a été implémentée sous  toolbar_vertical_separator.

Voir exemple
"theme": {
  "colors": {
    "accentcolor": "black",
    "toolbar": "black",
    "textcolor": "white",
    "toolbar_field_separator": "red"
  }
}

In this screenshot, "toolbar_vertical_separator" is the white vertical line in the URL bar dividing the Reader Mode icon from the other icons.

toolbar_text

La couleur du texte de la barre de navigation.

Voir exemple
"theme": {
  "colors": {
    "accentcolor": "black",
    "textcolor": "white",
    "toolbar": "black",
    "toolbar_text": "red"
  }
}

toolbar_top_separator

La couleur de la ligne séparant le bas de la barre d'outils de la région ci-dessous

Voir exemple
"theme": {
  "colors": {
    "accentcolor": "black",
    "textcolor": "white",
    "toolbar": "black",
    "toolbar_top_separator": "red"
  }
}

toolbar_vertical_separator

La couleur des séparateurs verticaux dans les barre d'outils

Voir exemple
"theme": {
  "colors": {
    "accentcolor": "black",
    "textcolor": "white",
    "toolbar": "black",
    "toolbar_vertical_separator": "red"
  }
}

Aliases

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.

 

Nom Alias pour
bookmark_text toolbar_text
frame accentcolor
frame_inactive accentcolor
tab_background_text textcolor

 

properties

Name Type Description
additional_backgrounds_alignment

Array of String

Opionel.

Un tableau de valeurs d'énumération définissant l'alignement de l'élément "additional_backgrounds": élément de tableau.
Les options d'alignement comprennent:

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

Si non spécifié, par default "left top".

additional_backgrounds_tiling

Array of String

Optional.

Un tableau de valeurs d'énumérations définissant, comme l'élément de tableau  "additional_backgrounds": correspondant de répétition. Les options comprennent :

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

Si non spécifié, par default "no-repeat".

Exemples

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:

 "theme": {
   "images": {
     "headerURL": "images/sun.jpg"
   },
   "colors": {
     "accentcolor": "#CF723F",
     "textcolor": "#000"
   }
 }

Plusieurs images peuvent être utilisées pour remplir l'en-tête, en utilisant une image d'en-tête vierge/transparente pour donner le contrôle de l'emplacement à chaque image visible:

 "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": {
     "accentcolor": "blue",
     "textcolor": "#ffffff"
   }
 }

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:

 "theme": {
   "images": {
     "headerURL": "images/blank.png",
     "additional_backgrounds": [ "images/logo.png"]
   },
   "properties": {
     "additional_backgrounds_alignment": [ "top" ],
     "additional_backgrounds_tiling": [ "repeat"  ]
   },
   "colors": {
     "accentcolor": "green",
     "textcolor": "#000"
   }
 }

L'exemple suivant utilise la plupart des différentes valeurs de "theme.colors":

  "theme": {
    "images": {
      "headerURL": "weta.png"
    },
      
    "colors": {
       "accentcolor": "darkgreen",
       "textcolor": "white",
       "toolbar": "blue",
       "toolbar_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"
    }
  }

Il vous donnera un navigateur qui ressemble à ceci :

Dans cette capture d'écran, "toolbar_vertical_separator" est la ligne verticale blanche dans la barre d'URL divisant l'icône du mode Lecteur des autres icônes.

Compatibilité du navigateur

ChromeEdgeFirefoxFirefox for AndroidOpera
Support simple Oui Non55 Non Non
colors.accentcolor Non Non551 Non Non
colors.bookmark_text Oui2 Non581 Non Non
colors.button_background_active Non Non60 Non Non
colors.button_background_hover Non Non60 Non Non
colors.frame Oui2 Non553 Non Non
colors.frame_inactive Oui2 Non60 Non Non
colors.frame_incognito Oui2 Non Non Non Non
colors.frame_incognito_inactive Oui2 Non Non Non Non
colors.icons Non Non60 Non Non
colors.icons_attention Non Non60 Non Non
colors.ntp_background Oui2 Non Non Non Non
colors.ntp_header Oui2 Non Non Non Non
colors.ntp_link Oui2 Non Non Non Non
colors.ntp_text Oui2 Non Non Non Non
colors.popup Non Non60 Non Non
colors.popup_highlight Non Non61 Non Non
colors.popup_highlight_text Non Non61 Non Non
colors.popup_text Non Non60 Non Non
colors.tab_background_text Oui2 Non59 Non Non
colors.tab_line Non Non60 Non Non
colors.tab_loading Non Non60 Non Non
colors.tab_selected Non Non60 Non Non
colors.tab_text Oui2 Non553 Non Non
colors.textcolor Non Non551 Non Non
colors.toolbar Oui2 Non571 Non Non
colors.toolbar_bottom_separator Non Non581 Non Non
colors.toolbar_field Non Non571 Non Non
colors.toolbar_field_border Non Non59 Non Non
colors.toolbar_field_border_focus Non Non61 Non Non
colors.toolbar_field_focus Non Non61 Non Non
colors.toolbar_field_separator Non Non

59

58 — 591 4

Non Non
colors.toolbar_field_text Non Non571 Non Non
colors.toolbar_field_text_focus Non Non61 Non Non
colors.toolbar_text Non Non571 Non Non
colors.toolbar_top_separator Non Non581 Non Non
colors.toolbar_vertical_separator Non Non585 Non Non

1. Before version 59, the RGB array form was not supported for this property.

2. The CSS color form is not supported for this property.

3. Before version 59, the CSS color form was not supported for this property.

4. Supported as toolbar_vertical_separator.

5. Before version 59, this had the same meaning as toolbar_field_separator.

Compatibilité de Chrome

Propriété Firefox Propriété Chrome
images/headerURL

images/frame_frame

Dans Chrome, l'image est ancrée en haut à gauche de l'en-tête et carrelée si elle ne remplit pas la zone d'en-tête.

images/additional_backgrounds Non supporté
colors/accentcolor colors/frame
colors/textcolor

Implémenté de manière incorrecte comme colors/tab_text de Firefox 55 à 58. Corrigé en tant que  colors/tab_background_text à partir de Firefox 59.

colors/toolbar_text colors/bookmark_text
properties/additional_backgrounds_alignment Non supporté
properties/additional_backgrounds_tiling Non supporté

Dans Chrome, toutes les couleurs doivent être spécifiées sous forme de liste de valeurs RGB, comme ceci:

"theme": {
  "colors": {
     "frame": [255, 0, 0],
     "tab_background_text": [0, 255, 0],
     "bookmark_text": [0, 0, 255]
  }
}

 A partir de Firefox 59, les formes de liste RGB et de couleurs CSS sont acceptées pour toutes les propriétés. Avant cela, colors/frame et colors/tab_text devaient être spécifiées sous forme de liste RGB, tandis que les autres propriétés devaient être spécifiées sous forme de couleurs CSS.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : hellosct1, ntim, loella16
 Dernière mise à jour par : hellosct1,