A meta tag theme-color, explicada
Uma linha de HTML que tinge a barra de endereços no Chrome mobile e a barra de título em apps instalados. Veja como usá-la bem.
O que ela realmente pinta
A meta tag theme-color diz ao navegador qual cor usar na interface que fica ao lado da sua página. No Chrome mobile e em alguns navegadores Android, isso é a barra de endereços e a barra de status. Em um PWA instalado, é a barra de título e as áreas ao redor. Em navegadores desktop ela normalmente não faz nada, então trate-a como um recurso para mobile e apps instalados.
O valor é uma única cor CSS. Um valor em hexadecimal é a escolha segura. Escolha algo que transmita sua marca e que ainda deixe texto branco ou claro legível, porque o navegador desenha seus próprios ícones e textos por cima da sua cor.
Cores separadas para claro e escuro
<meta
name="theme-color"
content="#ffffff"
media="(prefers-color-scheme: light)"
>
<meta
name="theme-color"
content="#0b0b0f"
media="(prefers-color-scheme: dark)"
>Duas tags, cada uma delimitada por uma media query. O navegador escolhe a que corresponde ao modo atual do usuário. Remova o atributo media se você quiser apenas uma cor para os dois modos.
Mantenha em sincronia com o manifest
O web app manifest tem seu próprio campo theme_color. Esse valor é o equivalente da meta tag para apps instalados: define a cor usada quando seu site é aberto a partir da tela inicial. A meta tag cobre a aba do navegador; o manifest cobre a janela do app instalado.
Defina os dois e configure-os com a mesma cor, a menos que você tenha um motivo real para não fazer isso. Uma divergência significa que sua barra de endereços tem uma cor no navegador e a barra de título tem outra depois de instalar, o que parece um bug. Veja o que é o manifest.json e o guia do web app manifest para a lista completa de campos.
Perguntas frequentes
O theme-color muda o meu favicon?
Não. O theme-color só tinge a interface do navegador ao redor da sua página. Ele não tem efeito nenhum sobre o favicon na aba, o apple-touch-icon ou qualquer ícone do manifest. Esses são arquivos de imagem separados.
Por que meu theme-color não funciona no desktop?
A maioria dos navegadores desktop ignora o theme-color. Ele foi feito para o Chrome mobile, alguns navegadores Android e janelas de PWA instalados. Teste-o em um celular ou depois de instalar o app, não em uma aba de desktop.
O theme-color deve combinar com o theme_color do manifest?
Sim, em quase todos os casos. A meta tag colore a aba do navegador e o theme_color do manifest colore a janela do app instalado. Valores diferentes fazem a cor saltar quando um usuário instala seu site.