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:
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)