Asignar un tema a la barra de direcciones del navegador para que coincida 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 los navegadores basados en Android, Google Chrome y Microsoft Edge. Consulta Compatibilidad de los navegadores para obtener actualizaciones.
Cómo falla la auditoría del color del tema de Lighthouse
Lighthouse marca las páginas que no aplican un tema a la barra de direcciones:
La auditoría falla si Lighthouse no encuentra una metaetiqueta theme-color en el código HTML de la página ni 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 a la que deseas agregar la marca
La metaetiqueta theme-color garantiza que se muestre la marca de la barra de direcciones cuando un usuario visite tu sitio como una página web normal.
Establece 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 del manifiesto de la app web garantiza que la barra de direcciones tenga la marca cuando un usuario inicie la AWP desde la pantalla principal.
A diferencia de la metaetiqueta theme-color, solo debes definirla una vez, en el manifiesto.
Establece la propiedad en 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)