Skip to content
Aprender Medir Blog Case studies About
En esta página
  • Compatibilidad del navegador
  • Cómo falla la auditoría de color del tema Lighthouse
  • Cómo establecer un color de tema para la barra de direcciones
    • Paso 1: agregue una meta tag theme-color a cada página que desee marcar
    • Paso 2: Agregue la propiedad theme_color al manifiesto de su aplicación web
  • Recursos

No establece un color de tema para la barra de direcciones

May 4, 2019 — Actualizado Jun 17, 2020
Available in: 日本語, 한국어, Português, Русский, 中文, English
Appears in: Auditorias de las PWA
En esta página
  • Compatibilidad del navegador
  • Cómo falla la auditoría de color del tema Lighthouse
  • Cómo establecer un color de tema para la barra de direcciones
    • Paso 1: agregue una meta tag theme-color a cada página que desee marcar
    • Paso 2: Agregue la propiedad theme_color al manifiesto de su aplicación web
  • Recursos

Usar un tema para la barra de direcciones del navegador para que coincida con los colores de la marca de su aplicación web progresiva (PWA) proporciona una experiencia de usuario más inmersiva.

Compatibilidad del navegador #

En el momento de redactar este artículo, el uso de temas para la barra de direcciones del navegador es compatible con los navegadores basados en Android. Consulte Compatibilidad del navegador para obtener actualizaciones.

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

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

La auditoría de Lighthouse que muestra que la barra de direcciones no está relacionada con los colores de la página

La auditoría falla si Lighthouse no encuentra una meta tag theme-color en el HTML de la página y una propiedad theme_color en el manifiesto de la aplicación web.

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

In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).

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

Paso 1: agregue una meta tag theme-color a cada página que desee marcar #

La meta tag theme-color garantiza que la barra de direcciones presente una marca cuando un usuario visita su sitio como una página web normal. Establezca el content (contenido) de la etiqueta en cualquier valor de color CSS válido:

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

Obtenga más información sobre la meta tag theme-color en Support for theme-color in Chrome 39 for Android.

Paso 2: Agregue la propiedad theme_color al manifiesto de su aplicación web #

La propiedad theme_color en el manifiesto de su aplicación web garantiza que la barra de direcciones presente la marca cuando un usuario inicia su PWA desde la pantalla de inicio. A diferencia de la meta-tag theme-color, solo necesita definir esto una vez, en el manifiesto. Establezca la propiedad en cualquier valor de color CSS válido:

{
"theme_color": "#317EFB"
…
}

El navegador establecerá el color de la barra de direcciones de cada página de su aplicación de acuerdo con el theme_color del manifiesto.

Recursos #

  • Código fuente para la auditoría No establece un color de tema para la barra de direcciones
  • Agregar un manifiesto de aplicación web
  • Support for theme-color in Chrome 39 for Android
Última actualización: Jun 17, 2020 — Mejorar el artículo
Return to all articles
Compartir
suscribir

Contribute

  • Presentar un error
  • Ver fuente

Contenido relevante

  • developer.chrome.com
  • Chrome Actualizaciones
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos los productos
  • Condiciones y privacidad
  • Principios de la Comunidad

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.