Como usar o manifesto do app da Web para especificar uma cor de tema para todo o site

O Chrome introduziu o conceito de uma cor de tema para seu site em 2014. A cor do tema é uma dica da sua página da Web que informa ao navegador qual cor usar para os elementos da interface, como a barra de endereço.

Por exemplo, abaixo está este site com e sem a cor do tema aplicada.

Cor do tema
Cor do tema

O problema é que você precisa definir a cor do tema em cada página. Se você tiver um site grande ou legado, não é sempre viável fazer muitas alterações em todo o site.

A partir do Chrome 46 (Beta de setembro de 2015), a adição de um atributo theme_color ao manifesto vai ter o efeito de aplicar a cor automaticamente a todas as páginas que o usuário visitar no seu domínio quando o site for iniciado na tela inicial.

Se a página já tiver uma metatag de cor do tema, por exemplo, <meta name="theme-color" content="#2196F3">, a configuração no nível da página será usada em vez do valor no manifesto.

Basta adicionar o atributo theme_color ao manifesto e especificar uma cor HTML.

    "theme_color": "#2196F3"

Para conferir isso em ação, acesse Airhorner, o melhor apito do mundo e adicione à tela inicial. Ou confira o manifesto do site.

Perguntas frequentes

  • Isso se aplica se meu site não for iniciado na tela inicial?
    Sim.
  • Isso vai se aplicar a todo o meu site, por exemplo, quando o usuário estiver apenas navegando?
    No momento, isso é improvável, porque o navegador precisaria fazer o download do manifesto com muito mais frequência, e atualmente ele é um recurso de baixa prioridade. O objetivo é analisar quando o usuário adiciona o site à tela inicial.