Stelt geen themakleur in voor de adresbalk

Door de adresbalk van de browser te thematiseren zodat deze overeenkomt met de merkkleuren van uw Progressive Web App (PWA) zorgt u voor een meeslepende gebruikerservaring.

Browsercompatibiliteit

Vanaf december 2022 wordt het thema van de adresbalk van de browser ondersteund in Android-browsers, Google Chrome en Microsoft Edge. Zie Browsercompatibiliteit voor updates.

Hoe de kleurenaudit van het Lighthouse-thema mislukt

Lighthouse markeert pagina's die geen thema op de adresbalk toepassen:

Lighthouse-audit laat zien dat de adresbalk niet is afgestemd op de kleuren van de pagina

De audit mislukt als Lighthouse geen theme-color metatag vindt in de HTML van de pagina en geen theme_color eigenschap in het webapp-manifest .

Houd er rekening mee dat Lighthouse niet test of de waarden geldige CSS-kleurwaarden zijn.

Hoe u een themakleur voor de adresbalk instelt

Stap 1: Voeg een metatag theme-color toe aan elke pagina die u wilt brandmerken

De metatag theme-color zorgt ervoor dat de adresbalk wordt gemerkt als een gebruiker uw site bezoekt als een normale webpagina. Stel het content van de tag in op een geldige CSS-kleurwaarde:

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

Meer informatie over de metatag theme-color vindt u in de ondersteuning van Google voor theme-color in Chrome 39 voor Android .

Stap 2: Voeg de eigenschap theme_color toe aan uw web-app-manifest

De eigenschap theme_color in uw webapp-manifest zorgt ervoor dat de adresbalk van een merknaam wordt voorzien wanneer een gebruiker uw PWA vanaf het startscherm start. In tegenstelling tot de theme-color metatag hoeft u deze slechts één keer te definiëren, in het manifest . Stel de eigenschap in op een geldige CSS-kleurwaarde:

{
  "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)