Es wird keine Designfarbe für die Adressleiste festgelegt.

Design der Adressleiste des Browsers an die Markenfarben anpassen Ihrer progressiven Web-App (PWA) bietet eine immersivere Nutzererfahrung.

Browserkompatibilität

Seit Dezember 2022 wird das Design der Adressleiste des Browsers auf folgenden Geräten unterstützt: Android-basierte Browser, Google Chrome und Microsoft Edge Weitere Informationen finden Sie unter Browserkompatibilität .

Wie die Prüfung der Farbe des Lighthouse-Designs fehlschlägt

Leuchtturm meldet Seiten ohne Design für die Adressleiste:

Lighthouse-Prüfung, bei dem die Adressleiste nicht an die Farben der Seite angepasst ist

Die Prüfung schlägt fehl, wenn Lighthouse kein theme-color-Meta-Tag im HTML und eine theme_color-Property im Web-App-Manifest.

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

Designfarbe der Adressleiste festlegen

Schritt 1: Auf jeder Seite, die du mit einem Branding versehen möchtest, ein theme-color-Meta-Tag hinzufügen

Das Meta-Tag theme-color sorgt dafür, dass die Adressleiste beim ein Nutzer Ihre Website als normale Webseite besucht. Lege für das content-Attribut des Tags einen beliebigen gültigen CSS-Farbwert fest:

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

Weitere Informationen zum theme-color-Meta-Tag in der Unterstützung für theme-color in Chrome 39 für Android.

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

Mit dem Attribut theme_color in deinem Web-App-Manifest wird sichergestellt, dass die Adresse wird gekennzeichnet, wenn ein Nutzer Ihre PWA vom Startbildschirm aus startet. Im Gegensatz zum theme-color-Meta-Tag müssen Sie , um dies einmal im Manifest zu definieren. Legen Sie für die Eigenschaft einen beliebigen 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)