Es wird keine Designfarbe für die Adressleiste festgelegt.

Wenn du die Adressleiste des Browsers an die Markenfarben deiner Progressive Web App (PWA) anpasst, kannst du die App noch ansprechender gestalten.

Browserkompatibilität

Seit Dezember 2022 wird das Design der Adressleiste des Browsers in Android-basierten Browsern, Google Chrome und Microsoft Edge unterstützt. Informationen zu Updates finden Sie unter Browserkompatibilität.

So funktioniert die Farbprüfung des Lighthouse-Designs nicht

Lighthouse kennzeichnet Seiten ohne Design in der Adressleiste:

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 kein theme-color-Meta-Tag im HTML-Code der Seite und die Property theme_color im Manifest der Web-App findet.

Lighthouse prüft nicht, ob es sich bei den Werten um gültige CSS-Farbwerte handelt.

Designfarbe für die Adressleiste festlegen

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

Mit dem Meta-Tag theme-color wird dafür gesorgt, dass die Adressleiste gebrandet wird, wenn ein Nutzer die Website als normale Webseite besucht. Legen Sie das Attribut content des Tags auf 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 unter Unterstützung von theme-color in Chrome 39 für Android.

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

Mit der Eigenschaft theme_color in Ihrem Web-App-Manifest wird dafür gesorgt, dass die Adressleiste markenbezogen wird, wenn ein Nutzer Ihre PWA auf dem Startbildschirm startet. Im Gegensatz zum Meta-Tag theme-color müssen Sie dies nur einmal im Manifest definieren. Legen Sie die Eigenschaft auf 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)