¿Cómo puedo cambiar el color de la barra de encabezado y la barra de direcciones en la versión más reciente de Chrome en Lollipop?

6 minutos de lectura

Avatar de usuario de Arpad Gabor
Arpad Gabor

Aún no he encontrado nada sobre este tema. Me gusta mucho la capacidad de cambiar el color de la barra de direcciones y el color del encabezado en la Vista general. ¿Hay una forma fácil de hacer esto?

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

Creo que necesitas Android 5.0 (Lollipop) para que esto funcione, y Chrome’s Combinar pestañas y aplicaciones ajustado a En.

  • A partir de enero de 2016, la opción Fusionar pestañas ya no es necesaria para que esto funcione (en Lollipop).

    – Esteban

    17 de marzo de 2016 a las 11:42

  • También es así para KitKat ahora…

    – Fiksdal

    22 de abril de 2016 a las 13:25

  • @Skuld Necesita combinar pestañas para ver el color en la vista “Aplicaciones recientes”, pero incluso si deshabilitó “Combinar pestañas y aplicaciones”, todavía puede ver el color cuando ve el sitio web en Chrome. Pero espero que lo arreglen 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á deshabilitada) también muestre el color del tema en lugar del gris opaco.

    – ADTC

    09/08/2016 a las 16:40


  • @ADTC, ¿estás hablando de que cuando vas a cambiar de pestaña pierde el color? Si es así, sí, no es ideal, pero no es realmente un gran problema, ya que recupera el color cuando hace clic en la pestaña. Lo importante es que el sitio web cuando se ve tiene el color correcto 🙂

    – Esteban

    10/08/2016 a las 13:50

  • @Skuld, con “Combinar pestañas y aplicaciones” activado apagadousted obtiene esta vista (enlace) cuando cambias de pestaña. En esta vista, todas las pestañas son grises. Sería bueno si el color del tema permaneciera en esta vista. Similar a cómo la “pestaña similar a una aplicación” tiene el color del tema cuando se activa “Combinar pestañas y aplicaciones” en y abres el conmutador de aplicaciones. (PD: Personalmente, odio fusionar porque tengo muchas pestañas y también tengo muchas aplicaciones. Quiero mantenerlas separadas o me volveré loco >.< )

    – ADTC

    11 de agosto de 2016 a las 3:41


Avatar de usuario de Arpad Gabor
Arpad Gabor

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

Necesitas agregar un <meta> etiqueta en tu <head> que contiene name="theme-color", con su código hexadecimal como valor de contenido. Por ejemplo:

<meta name="theme-color" content="#999999" />

Si el dispositivo Android tiene nativo dark-mode habilitado, entonces esto meta se ignora la etiqueta.

Chrome para Android no usa el color en dispositivos con nativo dark-mode activado.

Fuente: Metaetiqueta tema-color

  • Gracias. Consulte también html5rocks para obtener más información: actualizaciones.html5rocks.com/2014/11/…

    – redochka

    13 de marzo de 2015 a las 10:20

  • ¿Hay alguna configuración en Chrome para deshabilitar esto? No soporto la barra de direcciones de colores. Solo quiero el color predeterminado.

    – Jaime

    6 de noviembre de 2015 a las 22:19

  • @James: es posible que esta no sea una solución que le guste, pero puede detener el cambio de color desactivando la configuración ‘Combinar pestañas con aplicaciones’.

    – Novocaína

    14 de diciembre de 2015 a las 12:41

  • ¿En serio? Estoy usando Marshmallow, con la configuración ‘Combinar pestañas con aplicaciones’ desactivada, pero la barra de direcciones aún está coloreada. Tal vez ‘arreglan el error’.

    – usuario711413

    30 de enero de 2016 a las 12:23

  • No necesariamente tiene que ser un color hexadecimal, cualquier color CSS válido funcionará.

    – bool3max

    18 mayo 2016 a las 14:05

Avatar de usuario de Edoardo L'Astorina
Edoardo L’Astorina

en realidad necesitas 3 meta etiquetas compatibles con 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">

  • ¿Y la barra de carga? Como he visto sitios web que hacen que la barra superior sea oscura y la barra de carga blanca, pero no puedo encontrar el fragmento analizando el código.

    – Novato

    4 de febrero de 2016 a las 5:19

  • Nota: de acuerdo a 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

    6 de febrero de 2016 a las 14:06


  • @YanFoto que en realidad es información muy útil. ¿Cómo se haría eso?

    – viriato

    24 de febrero de 2016 a las 8:40

  • el iOS apple-mobile-web-app-status-bar-style el atributo solo admite black, black-translucent or default` – no puede usar un color personalizado.

    – seis

    14/03/2016 a las 22:15

  • si utiliza black-translucent hará que la barra superior sea transparente con texto blanco, que es probablemente lo que estaría buscando

    – 99 Problemas – La sintaxis no es una

    06/04/2016 a las 14:33


Avatar de usuario de Ravi Delixan
Ravi Delixan

Por ejemplo, para configurar el fondo con su color favorito/marca:

Agrega lo siguiente Meta propiedad a su código HTML en el CABEZA sección

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

Ejemplo

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

En la imagen a continuación, acabo de mencionar cómo Chrome está tomando 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 los colores de los elementos del navegador e incluso de la plataforma mediante 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 directrices (documentos aquí):

Ocultar los componentes de la interfaz de usuario de Safari

Establezca la metaetiqueta apple-mobile-web-app-capable en sí para activar el modo independiente. Por ejemplo, el siguiente HTML muestra contenido web en 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 pantalla completa, en lugar de empujarlo hacia abajo. Esto le da más altura al diseño, 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 Etiquetas meta admitidas.

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

Avatar de usuario de DDD
DDD

Desde el 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 mayor resolución que proporcione, y recomendamos proporcionar un archivo PNG de 192 × 192px. Por ejemplo:

<link rel="icon" sizes="192x192" href="nice-highres.png">

Avatar de usuario de John Yepthomi
Juan Yeptomi

Revisa todos estos pasos:

  1. Incluir <meta name="theme-color" content="#db4b5d" /> en el html <head> etiqueta.
  2. Abra la configuración móvil de Chrome:
    • Desplácese hacia abajo hasta el tema opción
      • Cambia al tema claro.
  3. Vuelva a cargar la página.

¿Ha sido útil esta solución?