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](https://developer.chrome.google.cn/static/docs/lighthouse/pwa/themed-omnibox/image/lighthouse-audit-showing-a2ac9a5b8e2a5.png?authuser=0000&hl=es)
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)