No establece un color de tema para la barra de direcciones.

Asignar temas a la barra de direcciones del navegador para que coincidan con los colores de la marca de tu app web progresiva (AWP) proporciona una experiencia del usuario más envolvente.

Compatibilidad del navegador

A partir de diciembre de 2022, los temas de la barra de direcciones del navegador son compatibles con Navegadores basados en Android, Google Chrome y Microsoft Edge. Consulta Compatibilidad con navegadores para ver las actualizaciones.

Cómo falla la auditoría de colores del tema de Lighthouse

Faro marca las páginas que no aplican un tema a la barra de direcciones:

Auditoría de Lighthouse que muestra que la barra de direcciones no tiene un tema relacionado con los colores de la página

La auditoría falla si Lighthouse no encuentra una metaetiqueta theme-color en el archivo HTML y una propiedad theme_color en el manifiesto de la app web

Ten en cuenta que Lighthouse no prueba si los valores son valores de color de CSS válidos.

Cómo establecer un color de tema para la barra de direcciones

Paso 1: Agrega una metaetiqueta theme-color a cada página que desees agregar a tu marca

La metaetiqueta theme-color garantiza que la barra de direcciones tenga la marca cuando un usuario visita tu sitio como una página web normal. Configura el atributo content de la etiqueta en cualquier valor de color de CSS válido:

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

Obtén más información sobre la metaetiqueta theme-color en la Compatibilidad con theme-color en Chrome 39 para Android.

Paso 2: Agrega la propiedad theme_color al manifiesto de tu app web

La propiedad theme_color en el manifiesto de tu app web garantiza que la dirección se marca cuando un usuario inicia tu AWP desde la pantalla principal. A diferencia de la metaetiqueta theme-color, solo necesitas definir esto una vez, en el manifiesto. Configura la propiedad con cualquier valor de color de 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)