Usar temas na barra de endereço do navegador de acordo com as cores da marca do seu Progressive Web App (PWA) oferece uma experiência do usuário mais imersiva.
Compatibilidade com navegadores
Desde dezembro de 2022, a aplicação de temas na barra de endereço do navegador pode ser usada em navegadores baseados no Android, no Google Chrome e no Microsoft Edge. Consulte Compatibilidade do navegador para conferir as atualizações.
Como falha na auditoria de cores de tema do Lighthouse
O Lighthouse sinaliza as páginas que não aplicam um tema à barra de endereço:
![Auditoria do Lighthouse mostrando que a barra de endereço não tem um tema relacionado às cores da página](https://developer.chrome.google.cn/static/docs/lighthouse/pwa/themed-omnibox/image/lighthouse-audit-showing-a2ac9a5b8e2a5.png?authuser=9&hl=pt-br)
A auditoria falhará se o Lighthouse não encontrar uma metatag theme-color
no HTML da página
e uma propriedade theme_color
no manifesto do app da Web.
O Lighthouse não testa se os valores são válidos de cor CSS.
Como definir uma cor de tema para a barra de endereço
Etapa 1: adicione uma metatag theme-color
a todas as páginas em que você quer promover a marca
A metatag theme-color
garante que a barra de endereço tenha a marca quando
um usuário visita seu site como uma página da Web normal.
Defina o atributo content
da tag como qualquer valor de cor CSS válido:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…
Saiba mais sobre a metatag theme-color
no
Suporte do Google para theme-color
no Chrome 39 para Android.
Etapa 2: adicionar a propriedade theme_color
ao manifesto do app da Web
A propriedade theme_color
no manifesto do app da Web garante que a barra
de endereço tenha a marca quando um usuário iniciar o PWA na tela inicial.
Diferente da metatag theme-color
, você só precisa
definir isso uma vez no manifesto.
Defina a propriedade como qualquer valor de cor CSS válido:
{
"theme_color": "#317EFB"
…
}
```
The browser will set the address bar color of every page of your app
according to the manifest's `theme_color`.
## Resources
- [Source code for **Does not set a theme color for the address bar** audit](https://github.com/GoogleChrome/lighthouse/blob/main/core/audits/themed-omnibox.js)
- [Add a web app manifest](https://web.dev/articles/add-manifest)
- [Support for `theme-color` in Chrome 39 for Android](/blog/support-for-theme-color-in-chrome-39-for-android)