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

Colocar 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

A partir de dezembro de 2022, os temas da barra de endereço do navegador poderão ser usados em navegadores Android, Google Chrome e Microsoft Edge. Consulte Compatibilidade do navegador para mais atualizações.

Como a auditoria de cores de tema do Lighthouse falha

O Lighthouse sinaliza 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 de acordo com as cores da página

A auditoria vai 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 valores de cor CSS válidos.

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

Etapa 1: adicione uma metatag theme-color a todas as páginas que você quer marcar

A metatag theme-color garante a marca da barra de endereço 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 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 inicia seu PWA na tela inicial. Diferentemente da metatag theme-color, você só precisa definir essa tag 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)