theme

Type Object
Mandatory No
Example
"theme": {
  "images": {
    "theme_frame": "images/sun.jpg"
  },
  "colors": {
    "frame": "#CF723F",
    "tab_background_text": "#000"
  }
}

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

Note: Si vous voulez inclure un thème avec une extension, veuillez voir l'API  theme.

Note: Depuis mai 2019, les thèmes doivent être signés pour être installés (bug 1545109). Voir Signature et distribution votre extension pour plus de détails.

Prise en charge des thèmes dans Firefox pour Android: Une nouvelle version de Firefox pour Android, basée sur GeckoView, est en cours de développement. Une pré-version ne support pas les thèmes.

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, "right 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

headerURL 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 theme_frame à la place.

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.

En option à partir de Firefox 60. Un de theme_frame ou headerURL devait être spécifié avant Firefox 60. Notez également que dans Firefox 60 et suivants, tout text-shadow appliqué au texte d'en-tête est supprimé si aucun headerURL n'est spécifié (voir bug 1404688).

Dans Firefox pour Android, headerURL ou theme_frame doit être spécifié.

theme_frame String

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.

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.

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

Dans Firefox pour Android, headerURL ou theme_frame doit être spécifié.

additional_backgrounds Array de String

La propriété additional_backgrounds est experimentale.  Il est actuellement accepté dans les versions finale de Firefox, mais son comportement est sujet à changement.

Un tableau d'URLs pour les images de fond supplémentaires à ajouter à la zone d'en-tête et à afficher derrière l'image "theme_frame" :  Ces images superposent la première image du tableau en haut, la dernière image du tableau en bas.

Optionel.

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 les différentes parties du navigateur. Ils sont tous facultatifs (mais notez que "accentcolor" et "textcolor"  é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:

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

Lorsqu'un composant est affecté par plusieurs propriétés de couleur, les propriétés sont listées par ordre de priorité.

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_background_text": [ 107 , 99 , 23 ], ou en héxadécimal, tel que "tab_background_text": #6b6317.

Dans Chrome, les couleurs ne peuvent être spécifiées que sous forme de tableau RVB.

Dans Firefox pour Android, les couleurs peuvent être spécifiées en utilisant:

  • La notation hexadecimale complète, c'est à dire #RRGGBB uniquement. Les syntaxes alpha et abrégée, comme dans #RGB[A], ne sont pas supportées.
  • Notation fonctionnelle (tableau RVB) pour les thèmes ciblant Firefox 68.2 ou supérieur.

Les couleurs pour les thèmes Firefox pour Android ne peuvent pas être spécifiées à l'aide des noms de couleurs.

Name Description
accentcolor

accentcolor 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  frame à la place.

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",
     "tab_background_text": "white"
  }
}

bookmark_text

La couleur du texte et des icônes dans le signet et les barres de recherche. De plus, si tab_text n'est pas défini, il définit la couleur du texte de l'onglet actif et si les icons 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 toolbar_text.

Assurez-vous que toute couleur utilisée contraste bien avec celles utilisées dans frame et frame_inactive ou toolbar si vous utilisez cette propriété.

Là où les icons ne sont pas définis, assurez-vous également d'un bon contraste avec button_background_active et button_background_hover.

Voir exemple
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar": "black",
    "bookmark_text": "red"
  }
}

Example use of the bookmark_text color property

button_background_active

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

Voir exemple
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "button_background_active": "red"
  }
}

button_background_hover

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

Voir exemple
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "button_background_hover": "red"
  }
}

icons

La couleur des icônes de la barre d'outils, à l'exclusion de celles de la barre d'outils de recherche.

Assurez-vous que la couleur utilisée contraste bien avec celles utilisées dans frameframe_inactive, button_background_active, et  button_background_hover.

Voir exemple
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "icons": "red"
  }
}

icons_attention

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é.

Assurez-vous que la couleur utilisée contraste bien avec celles utilisées dans frameframe_inactive, button_background_active, et  button_background_hover.

Voir exemple
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "icons_attention": "red"
  }
}

frame

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

Voir exemple
"theme": {
  "colors": {
     "frame": "red",
     "tab_background_text": "white"
  }
}

frame_inactive

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

Voir exemple
"theme": {
  "colors": {
     "frame": "red",
     "frame_inactive": "gray", 
     "tab_text": "white"
  }
}

Example use of the frame_inactive color property

ntp_background

La nouvelle couleur d'arrière-plan de la page à onglet.

Voir exemple
"theme": {
  "colors": {
     "ntp_background": "red",
     "ntp_text": "white"
  }
}

ntp_text

La couleur du texte de la page nouvel onglet.

Assurez-vous que la couleur utilisée contraste bien avec celle utilisée dans  ntp_background.

Voir exemple
"theme": {
  "colors": {
     "ntp_background": "red",
     "ntp_text": "white" 
  }
}

popup

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)

Voir exemple
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup": "red"
  }
}

popup_border

La couleur de la bordure des popups.

Voir exemple
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "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 du clavier dans les fenêtre contextuelles (tel que l’élément sélectionné dans le menu déroulant de la barre d'URL).

Il est recommandé de définir popup_highlight_text pour remplacer la couleur de texte par défaut du navigateur sur différentes plateformes.

Voir exemple
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup_highlight": "red",
     "popup_highlight_text": "white",
  }
}

popup_highlight_text

La couleur du texte des éléments mis en surbrillance dans les fenêtres contextuelles.

S'assurer que la couleur utilisée contraste bien avec celle utilisée dans popup_highlight.

Voir exemple
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup_highlight": "black",
     "popup_highlight_text": "red"
  }
}

popup_text

La couleur du texte des popups.

S'assurer que la couleur utilisée contraste bien avec celle utilisée dans popup.

Voir exemple
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "popup": "black",
     "popup_text": "red"
  }
}

sidebar

La couleur de fond des barres latérales intégrées.

Voir exemple
"theme": {
  "colors": {
     "sidebar": "red",
     "sidebar_highlight": "white",
     "sidebar_highlight_text": "green",
     "sidebar_text": "white"
  }
}

sidebar_border

La couleur de la bordure et du séparateur de la barre latérale du navigateur.

Voir exemple
"theme": {
  "colors": {
     "sidebar_border": "red"
  }
}

sidebar_highlight

La couleur d'arrière-plan des lignes en surbrillance dans les barres latérales intégrées.

Voir exemple
"theme": {
  "colors": {
     "sidebar_highlight": "red",
     "sidebar_highlight_text": "white"
  }
}

sidebar_highlight_text

La couleur du texte des lignes en surbrillance dans les barres latérales intégrées.

S'assurer que la couleur utilisée contraste bien avec celle utilisée dans sidebar_highlight.

Voir exemple
"theme": {
  "colors": {
    "sidebar_highlight": "pink",
    "sidebar_highlight_text": "red",
  }
}

sidebar_text

La couleur du texte des barres latérales intégrées.

S'assurer que la couleur utilisée contraste bien avec celle utilisée dans sidebar.

Voir exemple
"theme": {
  "colors": {
     "sidebar": "red",
     "sidebar_highlight": "white",
     "sidebar_highlight_text": "green",
     "sidebar_text": "white"
  }
}

tab_background_separator

La couleur du séparateur vertical des onglets d'arrière-plan.

Voir exemple
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_background_separator": "red"
  }
}

A closeup of browser tabs to highlight the separator.

tab_background_text

La couleur du texte affiché dans les onglets des pages inactives. Si tab_text ou bookmark_text n'est pas spécifié, s'applique au texte de l'onglet actif.

Assurez-vous que la couleur utilisée contraste bien avec celles utilisées dans  tab_selected ou frame et  frame_inactive.

Voir exemple
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "white",
    "tab_background_text": "red"
  }
}

tab_line

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

Voir exemple
"theme": {
  "colors": {
     "frame": "black",
     "tab_bckground_text": "white",
     "tab_line": "red"
  }
}

tab_loading

La couleur de l'indicateur de chargement de l'onglet et de l'effet de vague.

Voir exemple
"theme": {
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_loading": "red"
  }
}

tab_selected

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 frame et frame_inactive.

Voir exemple
"theme": {
  "images": {
  "theme_frame": "weta.png"
},
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_selected": "red"
  }
}

tab_text

Depuis Firefox 59, il représente la couleur du texte de l'onglet sélectionné. Si tab_line n'est pas spécifié, il définit également la couleur de la ligne de tabulation sélectionnée.

Assurez-vous que la couleur utilisée contraste bien avec celles utilisées dans  tab_selected ou frame et  frame_inactive.

De Firefox 55 à 58, il est incorrectement implémenté comme alias pour "textcolor"

Voir exemple
"theme": {
  "images": {
  "theme_frame": "weta.png"
},
  "colors": {
     "frame": "black",
     "tab_background_text": "white",
     "tab_selected": "white",
     "tab_text": "red"
  }
}

textcolor

textcolor 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 tab_text à la place.

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

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

toolbar

La couleur de fond de la barre de navigation, de la barre de signets et de l'onglet sélectionné.

Ceci définit également la couleur de fond de la barre "Rechercher".

Voir exemple
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "red",
    "tab_background_text": "white"
  }
}

toolbar_bottom_separator

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

Voir exemple
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar_bottom_separator": "red"
  }
}

toolbar_field

La couleur d'arrière-plan des champs de la barre d'outils, comme la barre URL.

Ceci définit également la couleur de fond du champ Rechercher dans la page.

Voir exemple
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar_field": "red"
  }
}

toolbar_field_border

La couleur de la bordure des champs de la barre d'outils.

Ceci définit également la couleur de fond du champ Rechercher dans la page.

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

toolbar_field_border_focus

La couleur de bordure pour les champs de la barre d'outils qui ont le focus.

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

toolbar_field_focus

La couleur de fond pour les champs de la barre d'outils qui ont le focus, tels que la barre d'URL.

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

toolbar_field_highlight 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).
See example
"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)"
  }
}

Example showing customized text and highlight colors in the URL bar

Ici, le champ toolbar_field_highlight 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  toolbar_field_highlight_text.

toolbar_field_highlight_text

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).

S'assurer que la couleur utilisée contraste bien avec celles utilisées dans  toolbar_field_highlight.

See example
"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)"
  }
}

Example showing customized text and highlight colors in the URL bar

Ici, le champ toolbar_field_highlight_text permet de régler la couleur du texte sur un vert foncé moyen foncé, tandis que la couleur de surbrillance est un vert clair.

toolbar_field_separator

La couleur des séparateurs à l'intérieur de la barre d'URL. Dans Firefox 58, cela a été implémenté en tant que toolbar_vertical_separator.

Voir exemple
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field_separator": "red"
  }
}

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

toolbar_field_text

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.

Assurez-vous que la couleur utilisée contraste bien avec celles utilisées dans  toolbar_field.

Voir exemple
"theme": {
  "colors": {
    "frame": "black",
    "toolbar": "black",
    "tab_background_text": "white",
    "toolbar_field": "black",
    "toolbar_field_text": "red"
  }
}

toolbar_field_text_focus

La couleur du texte dans les champs de la barre d'outils qui ont le focus, tels que la barre d'URL.

Assurez-vous que la couleur utilisée contraste bien avec celles utilisées dans  toolbar_field_focus.

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

toolbar_text

La couleur du texte de la barre d'outils. Ceci définit également la couleur du texte dans la barre "Rechercher".

Pour la compatibilité avec Chrome, utilisez l'alias bookmark_text.

Voir exemple
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "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 en dessous.

Voir exemple
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "white",
    "toolbar": "black",
    "toolbar_top_separator": "red"
  }
}

toolbar_vertical_separator

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.

Voir exemple
"theme": {
  "colors": {
    "frame": "black",
    "tab_background_text": "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.

A partir de Firefox 70, les propriétés suivantes sont supprimées : accentcolor et textcolor. Utilisez à la place frame et tab_background_text. L'utilisation de ces valeurs dans des thèmes chargés dans Firefox 65 ou une version ultérieure augmentera les avertissements.

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

Optionel.

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 "right 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": {
     "theme_frame": "images/sun.jpg"
   },
   "colors": {
     "frame": "#CF723F",
     "tab_background_text": "#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": {
     "frame": "blue",
     "tab_background_text": "#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": {
     "additional_backgrounds": [ "images/logo.png"]
   },
   "properties": {
     "additional_backgrounds_alignment": [ "top" ],
     "additional_backgrounds_tiling": [ "repeat"  ]
   },
   "colors": {
     "frame": "green",
     "tab_background_text": "#000"
   }
 }

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

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

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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxOperaFirefox pour Android
themeChrome Support complet OuiEdge Aucun support NonFirefox Support complet 55Opera Aucun support NonFirefox Android Support complet Oui
colorsChrome Support complet OuiEdge Aucun support NonFirefox Support complet 55Opera Aucun support NonFirefox Android Support complet 65
imagesChrome Support complet OuiEdge Aucun support NonFirefox Support complet 55
Notes
Support complet 55
Notes
Notes Mandatory before Firefox 60
Opera Aucun support NonFirefox Android Support complet Oui
propertiesChrome Support complet OuiEdge Aucun support NonFirefox Support complet 55Opera Aucun support NonFirefox Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Couleurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxOperaFirefox pour Android
colorsChrome Support complet OuiEdge Aucun support NonFirefox Support complet 55Opera Aucun support NonFirefox Android Support complet 65
accentcolor
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support 55 — 70
Notes
Aucun support 55 — 70
Notes
Notes Before version 59, the RGB array form was not supported for this property.
Notes Before version 63, this property was mandatory.
Notes Use frame instead.
Opera Aucun support NonFirefox Android Support complet 65
bookmark_textChrome Support complet Oui
Notes
Support complet Oui
Notes
Notes The CSS color form is not supported for this property.
Edge Aucun support NonFirefox Support complet 58
Notes
Support complet 58
Notes
Notes Before version 59, the RGB array form was not supported for this property.
Opera Aucun support NonFirefox Android Aucun support Non
button_background_activeChrome Aucun support NonEdge Aucun support NonFirefox Support complet 60Opera Aucun support NonFirefox Android Aucun support Non
button_background_hoverChrome Aucun support NonEdge Aucun support NonFirefox Support complet 60Opera Aucun support NonFirefox Android Aucun support Non
frameChrome Support complet Oui
Notes
Support complet Oui
Notes
Notes The CSS color form is not supported for this property.
Edge Aucun support NonFirefox Support complet 55
Notes
Support complet 55
Notes
Notes Before version 59, the CSS color form was not supported for this property.
Opera Aucun support NonFirefox Android Support complet Oui
frame_inactiveChrome Support complet Oui
Notes
Support complet Oui
Notes
Notes The CSS color form is not supported for this property.
Edge Aucun support NonFirefox Support complet 60Opera Aucun support NonFirefox Android Aucun support Non
frame_incognitoChrome Support complet Oui
Notes
Support complet Oui
Notes
Notes The CSS color form is not supported for this property.
Edge Aucun support NonFirefox Aucun support NonOpera Aucun support NonFirefox Android Aucun support Non
frame_incognito_inactiveChrome Support complet Oui
Notes
Support complet Oui
Notes
Notes The CSS color form is not supported for this property.
Edge Aucun support NonFirefox Aucun support NonOpera Aucun support NonFirefox Android Aucun support Non
iconsChrome Aucun support NonEdge Aucun support NonFirefox Support complet 60Opera Aucun support NonFirefox Android Aucun support Non
icons_attentionChrome Aucun support NonEdge Aucun support NonFirefox Support complet 60Opera Aucun support NonFirefox Android Aucun support Non
ntp_backgroundChrome Support complet Oui
Notes
Support complet Oui
Notes
Notes The CSS color form is not supported for this property.
Edge Aucun support NonFirefox Support complet 63Opera Aucun support NonFirefox Android Aucun support Non
ntp_headerChrome Support complet Oui
Notes
Support complet Oui
Notes
Notes The CSS color form is not supported for this property.
Edge Aucun support NonFirefox Aucun support NonOpera Aucun support NonFirefox Android Aucun support Non
ntp_linkChrome Support complet Oui
Notes
Support complet Oui
Notes
Notes The CSS color form is not supported for this property.
Edge Aucun support NonFirefox Aucun support NonOpera Aucun support NonFirefox Android Aucun support Non
ntp_textChrome Support complet Oui
Notes
Support complet Oui
Notes
Notes The CSS color form is not supported for this property.
Edge Aucun support NonFirefox Support complet 63Opera Aucun support NonFirefox Android Aucun support Non
popupChrome Aucun support NonEdge Aucun support NonFirefox Support complet 60Opera Aucun support NonFirefox Android Aucun support Non
popup_highlightChrome Aucun support NonEdge Aucun support NonFirefox Support complet 61Opera Aucun support NonFirefox Android Aucun support Non
popup_highlight_textChrome Aucun support NonEdge Aucun support NonFirefox Support complet 61Opera Aucun support NonFirefox Android Aucun support Non
popup_textChrome Aucun support NonEdge Aucun support NonFirefox Support complet 60Opera Aucun support NonFirefox Android Aucun support Non
tab_background_separatorChrome Aucun support NonEdge Aucun support NonFirefox Support complet 62Opera Aucun support NonFirefox Android Aucun support Non
tab_background_textChrome Support complet Oui
Notes
Support complet Oui
Notes
Notes The CSS color form is not supported for this property.
Edge Aucun support NonFirefox Support complet 59Opera Aucun support NonFirefox Android Aucun support Non
tab_lineChrome Aucun support NonEdge Aucun support NonFirefox Support complet 60Opera Aucun support NonFirefox Android Aucun support Non
tab_loadingChrome Aucun support NonEdge Aucun support NonFirefox Support complet 60Opera Aucun support NonFirefox Android Aucun support Non
tab_selectedChrome Aucun support NonEdge Aucun support NonFirefox Support complet 60Opera Aucun support NonFirefox Android Aucun support Non
tab_textChrome Support complet Oui
Notes
Support complet Oui
Notes
Notes The CSS color form is not supported for this property.
Edge Aucun support NonFirefox Support complet 55
Notes
Support complet 55
Notes
Notes Before version 59, the CSS color form was not supported for this property.
Opera Aucun support NonFirefox Android Aucun support Non
textcolor
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support 55 — 70
Notes
Aucun support 55 — 70
Notes
Notes Before version 59, the RGB array form was not supported for this property.
Notes Before version 63, this property was mandatory.
Notes Use tab_background_text instead.
Opera Aucun support NonFirefox Android Aucun support Non
toolbarChrome Support complet Oui
Notes
Support complet Oui
Notes
Notes The CSS color form is not supported for this property.
Edge Aucun support NonFirefox Support complet 57
Notes
Support complet 57
Notes
Notes Before version 59, the RGB array form was not supported for this property.
Notes Before version 61, this did not set the "Find" bar's color.
Opera Aucun support NonFirefox Android Aucun support Non
toolbar_bottom_separatorChrome Aucun support NonEdge Aucun support NonFirefox Support complet 58
Notes
Support complet 58
Notes
Notes Before version 59, the RGB array form was not supported for this property.
Opera Aucun support NonFirefox Android Aucun support Non
toolbar_fieldChrome Aucun support NonEdge Aucun support NonFirefox Support complet 57
Notes
Support complet 57
Notes
Notes Before version 59, the RGB array form was not supported for this property.
Notes Before version 61, this did not set the "Find" field's background color.
Opera Aucun support NonFirefox Android Aucun support Non
toolbar_field_borderChrome Aucun support NonEdge Aucun support NonFirefox Support complet 59
Notes
Support complet 59
Notes
Notes Before version 61, this did not set the "Find" field's border color.
Opera Aucun support NonFirefox Android Aucun support Non
toolbar_field_border_focusChrome Aucun support NonEdge Aucun support NonFirefox Support complet 61Opera Aucun support NonFirefox Android Aucun support Non
toolbar_field_focusChrome Aucun support NonEdge Aucun support NonFirefox Support complet 61Opera Aucun support NonFirefox Android Aucun support Non
toolbar_field_highlightChrome Aucun support NonEdge Aucun support NonFirefox Support complet 67Opera Aucun support NonFirefox Android Aucun support Non
toolbar_field_highlight_textChrome Aucun support NonEdge Aucun support NonFirefox Support complet 67Opera Aucun support NonFirefox Android Aucun support Non
toolbar_field_separatorChrome Aucun support NonEdge Aucun support NonFirefox Support complet 59
Support complet 59
Aucun support 58 — 59
Notes Autre nom
Notes Before version 59, the RGB array form was not supported for this property.
Autre nom Cette fonctionnalité utilise le nom non-standard : toolbar_vertical_separator
Opera Aucun support NonFirefox Android Aucun support Non
toolbar_field_textChrome Aucun support NonEdge Aucun support NonFirefox Support complet 57
Notes
Support complet 57
Notes
Notes Before version 59, the RGB array form was not supported for this property.
Notes Before version 61, this did not set the "Find" field's text color.
Opera Aucun support NonFirefox Android Aucun support Non
toolbar_field_text_focusChrome Aucun support NonEdge Aucun support NonFirefox Support complet 61Opera Aucun support NonFirefox Android Aucun support Non
toolbar_textChrome Aucun support NonEdge Aucun support NonFirefox Support complet 57
Notes
Support complet 57
Notes
Notes Before version 59, the RGB array form was not supported for this property.
Notes Before version 61, this did not set the "Find" bar's text color.
Opera Aucun support NonFirefox Android Aucun support Non
toolbar_top_separatorChrome Aucun support NonEdge Aucun support NonFirefox Support complet 58
Notes
Support complet 58
Notes
Notes Before version 59, the RGB array form was not supported for this property.
Opera Aucun support NonFirefox Android Aucun support Non
toolbar_vertical_separatorChrome Aucun support NonEdge Aucun support NonFirefox Support complet 58
Notes
Support complet 58
Notes
Notes Before version 59, this had the same meaning as toolbar_field_separator.
Opera Aucun support NonFirefox Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.

Images

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxOperaFirefox pour Android
imagesChrome Support complet OuiEdge Aucun support NonFirefox Support complet 55
Notes
Support complet 55
Notes
Notes Mandatory before Firefox 60
Opera Aucun support NonFirefox Android Support complet Oui
additional_backgroundsChrome Aucun support NonEdge Aucun support NonFirefox Support complet 55Opera Aucun support NonFirefox Android Aucun support Non
headerURL
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support 55 — 70
Notes
Aucun support 55 — 70
Notes
Notes Use theme_frame instead.
Opera Aucun support NonFirefox Android Aucun support Non
theme_frameChrome Support complet OuiEdge Aucun support NonFirefox Support complet 55Opera Aucun support NonFirefox Android Support complet Oui
Notes
Support complet Oui
Notes
Notes This property is required.

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Propriétés

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxOperaFirefox pour Android
propertiesChrome Support complet OuiEdge Aucun support NonFirefox Support complet 55Opera Aucun support NonFirefox Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Compatibilité de Chrome

Dans Chrome:

  • colors/toolbar_text n'est pas utilisé, utilisez colors/bookmark_text à la place.
  • images/theme_frame 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.
  • toutes les couleurs doivent être spécifiées sous la forme d'un tableau de valeurs RVB, comme ceci :
"theme": {
  "colors": {
     "frame": [255, 0, 0],
     "tab_background_text": [0, 255, 0],
     "bookmark_text": [0, 0, 255]
  }
}

A partir de Firefox 59, la forme tableau et la forme couleur CSS sont acceptées pour toutes les propriétés. Avant cela, colors/frame et colors/tab_background_text nécessitaient la forme tableau, alors que d'autres propriétés nécessitaient la forme couleur CSS.