theme-color: Tingindo a Interface do Navegador ao Redor da Sua Página
theme-color é uma meta tag que informa ao navegador qual cor pintar na sua própria interface ao redor da sua página: a área da barra de endereços no Chrome no Android, a interface da janela de um PWA instalado e o topo da janela no Safari recente. Você a define com uma meta tag de nome theme-color e um valor de cor, e pode declarar duas delas com um atributo media para que acompanhe os modos claro e escuro. Um web app manifest carrega o mesmo valor no seu campo theme_color para o app instalado.
O que ela muda
theme-color não afeta nada dentro da sua página. Ela afeta a superfície do próprio navegador ao redor dela, para que a fronteira entre o app e o navegador deixe de ser uma emenda visível. Em um celular, um site escuro sob uma barra de endereços branca parece duas coisas separadas; combiná-los faz parecer uma só.
É uma dica, não uma garantia. Os navegadores a aplicam onde têm uma superfície para tingir e a ignoram em outros lugares, e alguns recusam valores com pouco contraste em relação ao próprio texto. Nada quebra quando ela é ignorada.
Variantes clara e escura
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b0b0b" media="(prefers-color-scheme: dark)">O navegador escolhe a primeira tag cuja media query corresponde. Uma única tag sem atributo media se aplica em todos os esquemas.
Onde ela se aplica
| Superfície | Efeito |
|---|---|
| Chrome no Android | Tinge a barra de endereços e a área da barra de status |
| PWA instalado | Tinge a barra de título ou a barra de status do app |
| Safari (versões recentes) | Tinge o topo da janela no macOS e no iOS |
| Abas do Chrome no desktop | Nenhum efeito em uma janela normal do navegador |
Perguntas frequentes sobre theme-color
theme-color tem relação com o favicon?
Apenas no sentido de que são entregues juntos e devem combinar. O favicon identifica o site em uma aba; theme-color tinge a interface do navegador ao redor da página. Os geradores emitem ambos porque vêm da mesma paleta de marca.
Quais formatos de valor de cor são permitidos?
Qualquer cor CSS que o navegador consiga interpretar: hex, rgb(), hsl(), uma cor nomeada. Hex é a escolha mais segura porque é inequívoca entre os interpretadores.
Por que meu theme-color está sendo ignorado?
Causas comuns são um atributo media que nunca corresponde ao esquema atual, uma tag injetada após a primeira renderização, ou um navegador de desktop que simplesmente não tem superfície para tingir. Verifique primeiro no Chrome para Android, já que é onde o efeito é mais visível.