Gerador de theme-color

Meta theme-color: colorindo a barra do navegador no mobile e em PWAs

A tag <meta name="theme-color"> é uma linha minúscula de HTML com impacto desproporcional na percepção de marca: ela tinge a barra de endereço do Chrome no Android, a status bar do Safari iOS 15+, a barra de título de PWAs instalados, o tile no app switcher, o splash screen do PWA e até os previews de link no Discord, Slack e Telegram. Uma única linha leva a cor da sua marca do favicon para todo o chrome nativo que o sistema operacional expõe. Sem ela, o navegador cai no padrão branco ou cinza, quebrando a continuidade visual entre página e moldura.

Sintaxe, formatos de cor e variantes dark mode com media queries

A forma mais simples é <meta name="theme-color" content="#1e40af">. O atributo content aceita qualquer cor CSS válida: hex (#fff, #ffffff, #ffffffaa), rgb(), rgba(), hsl(), cores nomeadas (tomato) e até sintaxe moderna como oklch() nos navegadores mais recentes. Para suportar modo claro e escuro, envie duas tags com o atributo media carregando prefers-color-scheme — o navegador escolhe a que combina com a aparência atual do sistema. Combina perfeitamente com a mesma media query no seu CSS.

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#1e40af"> <!-- fallback -->

theme_color no manifest PWA e particularidades do iOS

Um PWA também declara cor no manifest.json, usada no splash screen, no chrome da janela standalone e no tile do app switcher após o install. Mantenha o valor do manifest em sincronia com a meta tag — caso contrário o usuário vê uma cor no navegador e outra no app instalado. O Safari iOS adiciona uma tag separada, <meta name="apple-mobile-web-app-status-bar-style">, que aceita default, black ou black-translucent e controla a status bar quando o usuário abre o site pela tela inicial em modo fullscreen. Para tiles fixados no Windows 10 / 11, <meta name="msapplication-TileColor"> define a cor de fundo no menu Iniciar.

<link rel="manifest" href="/manifest.json">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-TileColor" content="#1e40af">
<meta name="msapplication-navbutton-color" content="#1e40af">

// manifest.json
{
  "name": "1001 Ferramentas",
  "theme_color": "#1e40af",
  "background_color": "#0f172a",
  "display": "standalone"
}

Atualizando theme-color dinamicamente com JavaScript

Interfaces modernas às vezes animam o theme-color enquanto o usuário rola, troca de seção ou abre um modal. O navegador relê a meta tag sempre que o atributo content muda, então uma única linha de script atualiza o chrome em tempo real. Combine com um listener de scroll ou um Intersection Observer para casar o cabeçalho com a seção visível. Os navegadores limitam a animação a cerca de 60 fps, então mudanças muito rápidas são agrupadas — mantenha a transição estável, sem tremedeira.

const meta = document.querySelector('meta[name="theme-color"]')
function setThemeColor (hex) {
  meta.setAttribute('content', hex)
}
// Casar o chrome com a seção ativa
new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) setThemeColor(e.target.dataset.themeColor)
  })
}, { threshold: 0.6 }).observe(document.querySelector('.hero'))

Suporte de navegadores, efeitos colaterais e acessibilidade

• Chrome 39+ no Android — suporte completo na barra de endereço.
• Safari 15+ no iOS — colore status bar do topo e barra de ferramentas inferior em modo tab.
• Firefox 100+ — suporte parcial, principalmente no Android.
• Navegadores desktop — geralmente ignoram; o chrome continua com estilo do sistema.
• Embeds no Discord, Slack, Telegram — muitas plataformas usam theme-color (ou o equivalente no manifest) para tingir a faixa lateral do preview de link.
• Acessibilidade — garanta contraste suficiente entre a cor escolhida e os ícones da status bar renderizados em cima dela; cores muito claras forçam o SO ao modo "ícones escuros", que às vezes falha no iOS.

Perguntas frequentes

theme-color muda a barra do navegador no desktop? Não. Navegadores desktop ignoram o hint e mantêm o chrome com estilo do sistema. A tag só é útil em Android Chrome, iOS Safari 15+ e em alguns contextos de embed.

Devo manter a meta tag e o theme_color do manifest em sincronia? Sim. A meta tag rege a experiência no navegador; o manifest rege o PWA instalado. Valores dessincronizados produzem uma transição estranha durante o install.

Posso usar uma cor transparente? Hex com alpha (#ff000080) e rgba() são aceitos em navegadores modernos, mas o efeito é imprevisível porque o SO compõe a cor sobre o próprio fundo.

theme-color afeta a coerência com o favicon? Indiretamente. Uma boa identidade visual usa o mesmo tom para favicon, theme-color, theme_color do manifest e fundo da imagem Open Graph — essa consistência é o que o usuário associa à marca em uma olhada.

É possível animar theme-color suavemente? O navegador não anima a transição em si; ele "snapa" para a nova cor. Para simular animação, atualize a meta tag em pequenos incrementos com requestAnimationFrame, mas espere throttling.