Comment changer la couleur de la barre d'en-tête et de la barre d'adresse dans la dernière version de Chrome sur Lollipop?

578

Je n'ai encore rien trouvé sur ce sujet. J'aime vraiment la possibilité de changer la couleur de la barre d'adresse et la couleur de l'en-tête dans Aperçu? Existe-t-il un moyen simple de procéder?

Chrome pour Android entrez la description de l'image ici.

Je pense que vous avez besoin pour Android 5.0 Lollipop pour que cela fonctionne, et de Chrome onglets de fusion et applications ensemble à Sur .

android html google-chrome Arpad Gabor
la source
Depuis janvier 2016, l'option Fusionner les onglets n'est plus nécessaire pour que cela fonctionne (dans Lollipop).
Skuld
1
C'est aussi comme ça pour KitKat maintenant ..
Revetahw dit Reinstate Monica
@Skuld Vous avez besoin des onglets de fusion pour voir la couleur dans la vue "Applications récentes", mais même si vous avez désactivé "Onglets de fusion et applications", vous pouvez toujours voir la couleur lorsque vous consultez le site Web dans Chrome. Mais j'espère qu'ils le corrigeront un jour, afin que la liste des onglets dans Chrome (affichée lorsque "Fusionner les onglets et les applications" soit désactivée) affiche également la couleur du thème au lieu du gris terne.
ADTC
1
@ADTC parlez-vous quand vous allez changer d'onglet, il perd la couleur? Si oui, alors ce n'est pas idéal mais ce n'est pas vraiment un problème car il reprend la couleur lorsque vous cliquez sur l'onglet. La grande chose est que le site Web a la bonne couleur :)
Skuld
1
@Skuld, avec "Fusionner les onglets et les applications" désactivés , vous obtenez cette vue (lien) lorsque vous changez d'onglet. Dans cette vue, tous les onglets sont juste gris. Ce serait bien si la couleur du thème restait dans cette vue. Semblable à la façon dont la « app-like onglet » a la couleur du thème lorsque « Fusionner les onglets et les Apps » est activée sur et vous ouvrez le sélecteur d'applications. (PS: Personnellement, je déteste fusionner parce que j'ai beaucoup d'onglets, et puis j'ai aussi beaucoup d'applications. Je veux les garder séparées ou je vais devenir fou >.< )
ADTC

Réponses:

791

J'ai trouvé la solution après quelques recherches.

Vous devez ajouter une <meta>balise dans votre <head>conteneur name="theme-color", avec votre code HEX comme valeur de contenu. Par exemple:

<meta name="theme-color" content="#999999" />
Arpad Gabor
la source
19
Merci. Commander également html5rocks pour plus d'informations: updates.html5rocks.com/2014/11/…
redochka
4
Existe-t-il des paramètres dans Chrome pour désactiver cela? Je ne supporte pas la barre d'adresse colorée. Je veux juste la couleur par défaut.
James
@James - ce n'est peut-être pas un correctif que vous aimez, mais vous pouvez arrêter le changement de couleur en désactivant le paramètre `` Fusionner les onglets avec les applications ''.
Novocaine
4
Vraiment? J'utilise Marshmallow, avec le paramètre `` Fusionner les onglets avec les applications '' désactivé, mais la barre d'adresse est toujours colorée. Peut-être qu'ils ont «corrigé le bug».
user711413
3
Ne doit pas nécessairement être une couleur hexadécimale, toute couleur CSS valide fonctionnera.
Bogdan M.
501

Vous avez en fait besoin de 3 metabalises pour prendre en charge Android, iPhone et Windows Phone

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">
Edoardo L'Astorina
la source
Et la barre de chargement? Comme j'ai vu des sites Web qui rendent la barre supérieure sombre et la barre de chargement blanche, mais je ne trouve pas l'extrait analysant le code?
Débutant
19
Remarque : selon les notes de développement d'Apple : "Cette balise META n'a aucun effet sauf si vous spécifiez d'abord le mode plein écran comme décrit dans apple-apple-mobile-web-app-capable."
Yan Foto
@YanFoto qui est en fait des informations très utiles. Comment ferait-on cela?
viriato
44
L' apple-mobile-web-app-status-bar-styleattribut iOS prend uniquement en charge black, par black-translucent or défaut` - vous ne pouvez pas utiliser une couleur personnalisée.
sixones
2
si vous l'utilisez black-translucent, la barre supérieure sera transparente avec du texte blanc, ce qui est probablement ce que vous rechercherez.
99 Problems - Syntax ain't one
93

Par exemple, pour définir l'arrière-plan sur votre couleur préférée / de marque

Ajoutez la propriété Meta ci-dessous à votre code HTML dans la section HEAD

<head>
  ...
  <meta name="theme-color" content="Your Hexadecimal Code">
  ...
</head>

Exemple

<head>
  ...
  <meta name="theme-color" content="#444444">
  ...
</head>

Dans l'image ci-dessous, je viens de mentionner comment Chrome a pris votre propriété de couleur de thème

entrez la description de l'image ici

Firefox OS, Safari, Internet Explorer et Opera Coast vous permettent de définir les couleurs des éléments du navigateur, et même la plate-forme à l'aide de balises META.

<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Style spécifique à Safari

D'après les lignes directrices Documents ici

Masquage des composants de l'interface utilisateur de Safari

Définissez la balise META compatible Apple-Mobile-Web-App sur Oui pour activer le mode autonome. Par exemple, le code HTML suivant affiche le contenu Web en mode autonome.

<meta name="apple-mobile-web-app-capable" content="yes">

Modification de l'apparence de la barre d'état

Vous pouvez changer l'apparence de la barre d'état par défaut en noir ou en noir translucide. Avec le noir translucide, la barre d'état flotte au-dessus du contenu plein écran, plutôt que de le pousser vers le bas. Cela donne à la disposition plus de hauteur, mais obstrue le haut. Voici le code requis:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Pour en savoir plus sur l'apparence de la barre d'état, voir apple-mobile-web-app-status-bar-style.

Par exemple:

Capture d'écran utilisant du noir translucide

Capture d'écran utilisant du noir translucide

Capture d'écran en noir

Capture d'écran en noir

Ravi Delixan
la source
42

De la documentation officielle ,

Par exemple, pour définir la couleur d'arrière-plan sur orange:

<meta name="theme-color" content="#db5945">

De plus, Chrome affichera de superbes favicons haute résolution lorsqu'ils seront fournis. Chrome pour Android sélectionne l'icône de résolution la plus élevée que vous fournissez, et nous vous recommandons de fournir un fichier PNG 192 × 192px. Par exemple:

<link rel="icon" sizes="192x192" href="nice-highres.png">
Deval Khandelwal
la source
22
c'est la même chose que la réponse originale, en plus d'ajouter des informations non liées
igorsantos07
9
@ igorsantos07 Je voulais juste ajouter un lien vers les documents officiels. C'est tout
Deval Khandelwal
4
Je pensais qu'un lien vers la documentation était exactement ce qui manquait dans la réponse sélectionnée. C'est pour ça que je cherchais sur Google lorsque je me suis retrouvé ici. Je vous remercie.
Justin Force
C'est redondant
taimur alam