Usa el manifiesto de la app web para especificar un color de tema en todo el sitio

Chrome presentó el concepto de un color de tema para tu sitio en 2014. El color del tema es una sugerencia de tu página web que le indica al navegador de qué color debe teñir los elementos de la IU, como la barra de direcciones.

Por ejemplo, a continuación, se muestra este sitio con y sin el color del tema aplicado.

Color del tema
Color del tema

El problema es que debes definir el color del tema en cada página y, si tienes un sitio grande o heredado, no siempre es posible realizar muchos cambios en todo el sitio.

A partir de Chrome 46 (beta de septiembre de 2015), agregar un atributo theme_color a tu manifiesto tendrá el efecto de aplicar el color automáticamente a cada página que el usuario visite en tu dominio cuando se inicie el sitio desde la pantalla principal.

Si tu página ya tiene una metaetiqueta de color del tema, por ejemplo, <meta name="theme-color" content="#2196F3">, se usará la configuración a nivel de la página en lugar del valor del manifiesto.

Simplemente agrega el atributo theme_color a tu manifiesto y especifica un color HTML.

    "theme_color": "#2196F3"

Para ver cómo funciona, visita Airhorner: la mejor bocina del mundo y agrégala a la pantalla principal. También puedes consultar el manifiesto del sitio.

Preguntas frecuentes

  • ¿Esto se aplica si mi sitio no se inicia desde la pantalla principal?
    Sí.
  • ¿Se aplicará a todo mi sitio, por ejemplo, cuando el usuario solo esté navegando?
    Por el momento, es poco probable, ya que para hacerlo, el navegador tendría que descargar el manifiesto mucho más a menudo y, actualmente, es un recurso de baja prioridad. Se espera que se analice cuando el usuario agregue el sitio a la pantalla principal.