Es wird keine Designfarbe für die Adressleiste festgelegt.

Die Adressleiste des Browsers lässt sich so an die Markenfarben deiner Progressive Web App (PWA) anpassen. Das sorgt für ein immersives Nutzererlebnis.

Browserkompatibilität

Seit Dezember 2022 werden Designs für die Adressleiste des Browsers in Android-basierten Browsern, Google Chrome und Microsoft Edge unterstützt. Weitere Informationen finden Sie unter Browserkompatibilität.

So funktioniert die Farbprüfung des Lighthouse-Designs nicht

Lighthouse kennzeichnet Seiten, für die kein Design festgelegt wurde:

Bei der Lighthouse-Prüfung wird angezeigt, dass die Adressleiste nicht mit den Farben der Seite übereinstimmt

Die Prüfung schlägt fehl, wenn Lighthouse weder ein theme-color-Meta-Tag im HTML-Code der Seite noch eine theme_color-Eigenschaft im Web-App-Manifest findet.

Lighthouse prüft nicht, ob die Werte gültige CSS-Farbwerte sind.

Designfarbe für Adressleiste festlegen

Schritt 1: Fügen Sie auf jeder Seite, die Sie mit einem Branding versehen möchten, ein theme-color-Meta-Tag hinzu.

Mit dem Meta-Tag theme-color wird dafür gesorgt, dass die Adressleiste mit einer Marke versehen ist, wenn ein Nutzer Ihre Website als normale Webseite besucht. Legen Sie für das Attribut content des Tags einen gültigen CSS-Farbwert fest:

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

Weitere Informationen zum Meta-Tag theme-color finden Sie im Google-Artikel Unterstützung für theme-color in Chrome 39 für Android.

Schritt 2: theme_color-Property dem Manifest Ihrer Web-App hinzufügen

Mit dem Attribut theme_color in Ihrem Web-App-Manifest wird dafür gesorgt, dass die Adressleiste mit Marken versehen ist, wenn ein Nutzer Ihre PWA auf dem Startbildschirm startet. Anders als beim Meta-Tag theme-color musst du dies nur einmal im Manifest definieren. Legen Sie für die Eigenschaft einen gültigen CSS-Farbwert fest:

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