Aplicação de temas na barra de endereço do navegador para combinar com as cores da marca do seu Progressive Web App (PWA) proporciona uma experiência do usuário mais imersiva.
Compatibilidade com navegadores
A partir de dezembro de 2022, a barra de endereço do navegador terá suporte para temas: Navegadores baseados em Android, Google Chrome e Microsoft Edge. Consulte Compatibilidade do navegador para atualizações.
Como a auditoria de cores do tema do Lighthouse é reprovada
Farol sinaliza páginas que não aplicam um tema à barra de endereço:
A auditoria será reprovada se o Lighthouse não encontrar a metatag theme-color no parâmetro
HTML e uma propriedade theme_color no manifesto do app da Web.
O Lighthouse não testa se os valores são valores de cor CSS válidos.
Como definir uma cor de tema para a barra de endereço
Etapa 1: adicionar uma metatag theme-color a cada página em que você quer adicionar a marca
A metatag theme-color garante que a barra de endereço tenha a marca quando:
um usuário acessa seu site como uma página da Web normal.
Defina o atributo content da tag com 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 na
Suporte 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 o endereço
é marcada quando um usuário inicia seu PWA na tela inicial.
Ao contrário da metatag theme-color, você só precisa
para defini-lo uma vez, no manifesto.
Defina a propriedade com 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)