Skip to content
Aprender Medir Blog Case studies Sobre
Nesta página
  • Compatibilidade dos navegadores
  • Como a auditoria de cor do tema do Lighthouse falha
  • Como definir uma cor de tema para a barra de endereço
    • Passo 1: adicione uma meta tag theme-color a cada página que deseja marcar
    • Passo 2: adicione a propriedade theme_color ao seu manifesto web app
  • Recursos

Não define uma cor de tema para a barra de endereço

May 4, 2019 — Atualizado Jun 17, 2020
Available in: Español, 日本語, 한국어, Русский, 中文, English
Appears in: Auditorias de PWA
Nesta página
  • Compatibilidade dos navegadores
  • Como a auditoria de cor do tema do Lighthouse falha
  • Como definir uma cor de tema para a barra de endereço
    • Passo 1: adicione uma meta tag theme-color a cada página que deseja marcar
    • Passo 2: adicione a propriedade theme_color ao seu manifesto web app
  • Recursos

Aplicar um tema na barra de endereço do navegador para corresponder às cores da marca de seu Progressive Web App (PWA) fornece uma experiência de usuário mais envolvente.

Compatibilidade dos navegadores #

No momento em que este artigo foi escrito, o tema da barra de endereço do navegador era suportado em navegadores baseados em Android. Veja a compatibilidade dos navegadores para atualizações.

Como a auditoria de cor do tema do Lighthouse falha #

O Lighthouse marca páginas que não aplicam um tema à barra de endereço:

Auditoria Lighthouse mostrando barra de endereço que não tem o tema das cores da página

A auditoria falha se o Lighthouse não encontrar uma meta tag theme-color no HTML da página e uma propriedade theme_color no manifesto web app.

Observe que o Lighthouse não testa se os valores são valores de cor CSS válidos.

In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).

Como definir uma cor de tema para a barra de endereço #

Passo 1: adicione uma meta tag theme-color a cada página que deseja marcar #

A meta tag theme-color garante que a barra de endereço seja marcada quando um usuário visitar seu site como uma página da web normal. Defina o atributo content da tag para qualquer valor de cor CSS válido:

<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…

Saiba mais sobre a meta tag theme-color no artigo Suporte a theme-color no Chrome 39 para Android do Google.

Passo 2: adicione a propriedade theme_color ao seu manifesto web app #

A propriedade theme_color em seu manifesto web app garante que a barra de endereço seja marcada quando um usuário iniciar seu PWA a partir da tela inicial. Ao contrário da meta tag theme-color do tema, você só precisa defini-la uma vez, no manifesto. Defina a propriedade para qualquer valor de cor CSS válido:

{
"theme_color": "#317EFB"
…
}

O navegador definirá a cor da barra de endereço de cada página do seu aplicativo de acordo com o theme_color do manifesto.

Recursos #

  • Código fonte para a auditoriaNão define uma cor de tema para a barra de endereço
  • Adicionar um manifesto web app
  • Suporte a theme-color no Chrome 39 para Android
Last updated: Jun 17, 2020 — Improve article
Return to all articles
Compartilhar
assinar

Contribute

  • Registrar um bug
  • Visualizar código-fonte

Conteúdo relacionado

  • developer.chrome.com
  • Atualizações do Chrome
  • Web Fundamentals
  • Estudos de caso
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos os produtos
  • Termos e privacidade
  • Diretrizes da comunidade

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.