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

Chrome introdujo el concepto de un color de tema para tu sitio en 2014. El color de tema es una sugerencia de tu página web que indica al navegador el color con el que deben matizarse 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, septiembre de 2015), agregar un atributo theme_color al manifiesto tendrá el efecto de aplicar automáticamente el color a cada página que visite el usuario de tu dominio cuando se inicie el sitio desde la pantalla principal.

Si tu página ya tiene una metaetiqueta de color de 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 esto en acción, visita Airhorner, el mejor Airhorner del mundo y agrégalo 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 probable que esto signifique que el navegador tendría que descargar el manifiesto con mucha más frecuencia y, actualmente, es un recurso de prioridad baja. Se pretende que se analice cuando el usuario agrega el sitio a la pantalla principal.