¿Cómo cambiar el color de la barra de encabezado y la barra de direcciones en la última versión de Chrome en Lollipop?

578

Todavía no he encontrado nada sobre este tema. Realmente me gusta la capacidad de cambiar el color de la barra de direcciones y el color del encabezado en Descripción general. ¿Hay alguna manera fácil de hacer esto?

Chrome para Android ingrese la descripción de la imagen aquí.

Creo que se necesita Android 5.0 Lollipop para que esto funcione, y Chrome de aquí se fusionan y Aplicaciones conjunto de En .

android html google-chrome Arpad Gabor
fuente
A partir de enero de 2016, la opción Combinar pestañas ya no es necesaria para que esto funcione (en Lollipop).
Skuld
1
También es así para KitKat ahora ..
Revetahw dice Reinstate Monica
@Skuld Necesita Fusionar pestañas para ver el color en la vista "Aplicaciones recientes", pero incluso si deshabilitó "Fusionar pestañas y aplicaciones", aún puede ver el color cuando visualiza el sitio web en Chrome. Pero espero que lo solucionen algún día, de modo que la lista de pestañas dentro de Chrome (que se muestra cuando "Combinar pestañas y aplicaciones" esté desactivada) también muestre el color del tema en lugar del gris opaco.
ADTC
1
@ADTC ¿de qué estás hablando cuando vas a cambiar de pestaña se pierde el color? Si es así, sí, no es lo ideal, pero en realidad no es gran cosa, ya que recupera el color al hacer clic en la pestaña. Lo importante es que el sitio web cuando se ve tiene el color correcto :)
Skuld
1
@Skuld, con "Combinar pestañas y aplicaciones" desactivado , obtienes esta vista (enlace) cuando cambias pestañas. En esta vista, todas las pestañas son solo grises. Sería bueno que el color del tema permaneciera en esta vista. De manera similar a cómo la "aplicación similar a la pestaña" tiene el color del tema cuando "Combinar aquí y Aplicaciones" se convirtieron en y se abre el conmutador de aplicaciones. (PD: Personalmente odio fusionarme porque tengo muchas pestañas, y luego también tengo muchas aplicaciones. Quiero mantenerlas separadas o me volveré loco >.< )
ADTC

Respuestas:

791

Encontré la solución después de algunas búsquedas.

Debe agregar una <meta>etiqueta en su <head>contenido name="theme-color", con su código HEX como valor de contenido. Por ejemplo:

<meta name="theme-color" content="#999999" />
Arpad Gabor
fuente
19
Gracias. Pedido también HTML5Rocks para más información: updates.html5rocks.com/2014/11/...
redochka
44
¿Hay alguna configuración en Chrome para deshabilitar esto? No soporto la barra de direcciones de color. Solo quiero el color predeterminado.
James
@James: puede que no sea una solución que te guste, pero puedes detener el cambio de color desactivando la configuración 'Combinar pestañas con aplicaciones'.
Novocaine
44
De Verdad? Estoy usando Marshmallow, con la opción 'Combinar pestañas con aplicaciones' desactivada, pero la barra de direcciones todavía está coloreada. Tal vez 'arreglaron el error'.
user711413
3
No necesariamente debe ser un color hexadecimal, cualquier color CSS válido funcionará.
Bogdan M.
501

Realmente necesitas 3 metaetiquetas para soportar Android, iPhone y 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
fuente
¿Y qué hay de la barra de carga? Como he visto sitios web que oscurecen la barra superior y la barra de carga blanca, pero no puedo encontrar el fragmento que analiza el código.
Novato
19
Nota : según las notas de desarrollo de Apple : "Esta metaetiqueta no tiene efecto a menos que primero especifique el modo de pantalla completa como se describe en apple-apple-mobile-web-app-capable".
Yan Foto
@YanFoto que en realidad es información muy útil. ¿Cómo haría uno eso?
viriato
44
El apple-mobile-web-app-status-bar-styleatributo iOS solo es compatible black, por black-translucent or defecto`: no puede usar un color personalizado.
sixones
2
si utiliza black-translucenthará que la barra superior transparente con el texto blanco que es probablemente lo que sería después
99 - Problemas de sintaxis no es uno
93

Por ejemplo, para establecer el fondo a su color favorito / Marca

Agregue debajo de la propiedad Meta a su código HTML en la sección HEAD

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

Ejemplo

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

En la siguiente imagen, acabo de mencionar cómo Chrome tomó su propiedad de color de tema

ingrese la descripción de la imagen aquí

Firefox OS, Safari, Internet Explorer y Opera Coast le permiten definir colores para elementos del navegador e incluso la plataforma utilizando metaetiquetas.

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

Estilo específico de Safari

De las pautas Documentos aquí

Ocultar componentes de la interfaz de usuario de Safari

Establezca la metaetiqueta apta para aplicaciones móviles-móviles-apple en sí para activar el modo independiente. Por ejemplo, el siguiente HTML muestra contenido web usando el modo independiente.

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

Cambiar la apariencia de la barra de estado

Puede cambiar la apariencia de la barra de estado predeterminada a negro o negro translúcido. Con negro translúcido, la barra de estado flota sobre el contenido de la pantalla completa, en lugar de presionarlo hacia abajo. Esto le da al diseño más altura, pero obstruye la parte superior. Aquí está el código requerido:

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

Para obtener más información sobre la apariencia de la barra de estado, consulte apple-mobile-web-app-status-bar-style.

Por ejemplo:

Captura de pantalla con negro translúcido

Captura de pantalla con negro translúcido

Captura de pantalla usando negro

Captura de pantalla usando negro

Ravi Delixan
fuente
42

De la documentación oficial ,

Por ejemplo, para establecer el color de fondo en naranja:

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

Además, Chrome mostrará hermosos favicons de alta resolución cuando se proporcionen. Chrome para Android elige el ícono de resolución más alta que proporciona, y le recomendamos que proporcione un archivo PNG de 192 × 192px. Por ejemplo:

<link rel="icon" sizes="192x192" href="nice-highres.png">
Deval Khandelwal
fuente
22
esta es la misma que la respuesta original, además de añadir información no relacionada
igorsantos07
99
@ igorsantos07 Solo quería agregar un enlace a los documentos oficiales. Eso es todo
Deval Khandelwal
44
Pensé que un enlace a la documentación es exactamente lo que faltaba en la respuesta seleccionada. Para eso estaba buscando en Google cuando terminé aquí. Gracias.
Justin Force
Esto es redundante
taimur alam