android - theme - ¿Cómo cambiar el color de la barra de encabezado y la barra de direcciones en la versión más reciente de Chrome en Lollipop?
como cambiar la interfaz de google chrome (4)
Todavía no he encontrado nada sobre este tema. ¿Realmente me gusta la posibilidad 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?
.
Creo que necesitas Android 5.0 Lollipop para que esto funcione, y las pestañas y aplicaciones de combinación de Chrome están activadas .
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á bonitos favicons de alta resolución cuando se proporcionen. Chrome para Android selecciona el ícono de resolución más alto que usted proporciona, y le recomendamos que proporcione un archivo PNG de 192 × 192px. Por ejemplo:
<link rel="icon" sizes="192x192" href="nice-highres.png">
Encontré la solución después de algunas búsquedas.
Debe agregar una etiqueta <meta> en su <head> contenga name="theme-color" , con su código HEX como valor de contenido. Por ejemplo:
<meta name="theme-color" content="#999999" />
Por ejemplo, para establecer el fondo a su color favorito / Marca
Agregue la propiedad Below Below a su código HTML en la sección HEAD
<head>
...
<meta name="theme-color" content="Your Hexa Decimal Code">
...
</head>
Ejemplo
<head>
...
<meta name="theme-color" content="#444444">
...
</head>
En la imagen de abajo, acabo de mencionar cómo Chrome tomó su propiedad de color de tema
Firefox OS, Safari, Internet Explorer y Opera Coast le permiten definir colores para los elementos del navegador, e incluso la plataforma utilizando etiquetas 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">
Estilo específico de Safari
De las directrices Documentos aquí
Ocultar componentes de la interfaz de usuario de Safari
Establezca la metaetiqueta compatible con la aplicación web de Apple-mobile en sí para activar el modo independiente. Por ejemplo, el siguiente HTML muestra el contenido web utilizando 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 usando negro-translúcido
Captura de pantalla usando negro
Realmente necesitas 3 etiquetas meta 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">