Passen Sie das Thema und die Hintergrundfarben Ihrer App an

Beim Erstellen von Progressive Web Apps (PWAs) ist es wichtig, nicht nur das Erscheinungsbild der Inhalte Ihrer App zu berücksichtigen, sondern auch, wie die App auf dem Gerät des Benutzers aussieht, nachdem sie installiert wurde.

Eine Möglichkeit, das Fenster anzupassen, in dem Ihre App erscheint, besteht darin, die theme_color und background_color Web-App-Manifest-Mitglieder zu verwenden.

Durch die Definition der theme_color- und background_color-Mitglieder in Ihrem PWA-Manifest können Sie ein ansprechenderes Erlebnis für Ihre Benutzer schaffen. Diese kleinen Details können dazu beitragen, dass sich Ihre PWA mehr wie eine native OS-App anfühlt und den Benutzern vertrauter vorkommt.

Passen Sie die Hintergrundfarbe des Anwendungsfensters an

Das background_color-Manifestmitglied definiert die Farbe, die im Anwendungsfenster angezeigt wird, bevor die Stylesheets Ihrer App geladen sind.

Da diese Farbe angezeigt wird, bevor Ihre Stylesheets geladen sind, setzen Sie ihren Wert auf denselben Farbwert wie die background-color-CSS-Eigenschaft im Stylesheet Ihrer Anwendung. Dies gewährleistet einen sanften visuellen Übergang zwischen dem Start der Webanwendung und dem Laden ihres Inhalts.

Der Wert kann jeden gültigen CSS-<color> darstellen. In diesem Beispiel eines Web-App-Manifestdatei ist die Hintergrundfarbe der Anwendung auf die benannte Farbe peachpuff gesetzt:

json
{
  "name": "My app",
  "start_url": "/",
  "icons": [
    {
      "src": "icon.webp",
      "sizes": "256x256",
      "type": "image/webp"
    }
  ],
  "display": "standalone",
  "background_color": "peachpuff"
}

Die Anwendung lädt auch ein Stylesheet, das dieselbe Farbe auf den Hintergrund des Body-Elements anwendet:

css
body {
  background-color: peachpuff;
}

Der folgende Screenshot zeigt den obigen Code in Aktion. Die PWA, die diesen Code verwendet, ist auf Windows installiert, und der Screenshot zeigt, wie das Anwendungsfenster aussieht, bevor der Inhalt der App geladen ist:

Das Anwendungsfenster auf Windows zeigt die peachpuff-Hintergrundfarbe

Eine Thema-Farbe definieren

Das theme_color-Mitglied in Ihrem PWA-Manifest definiert die Standardfarbe der Betriebssystem- und Browser-UI-Elemente, die in der Anwendung verwendet werden.

Verschiedene Geräte, Betriebssysteme und Browser wenden das theme_color-Mitglied unterschiedlich an. Zum Beispiel:

  • Auf mobilen Geräten wird die Thema-Farbe auf die Statusleiste angewendet.
  • Auf Desktop-Betriebssystemen wird die Thema-Farbe verwendet, um die Titelleiste Ihres eigenständigen Anwendungsfensters anzupassen.

Wählen Sie eine theme_color, die das allgemeine Design und die Markenbindung Ihrer PWA ergänzt und gut über eine Vielzahl von Geräten und Plattformen funktioniert, um ein konsistentes Benutzererlebnis zu gewährleisten.

Wie bei background_color ist jeder <color> Wert gültig. In diesem Beispiel einer Web-App-Manifestdatei ist die theme_color auf das rgb(255 218 185), das RGB-Äquivalent von peachpuff, gesetzt:

json
{
  "name": "My app",
  "start_url": "/",
  "icons": [
    {
      "src": "icon.webp",
      "sizes": "48x48",
      "type": "image/webp"
    }
  ],
  "display": "standalone",
  "background_color": "peachpuff",
  "theme_color": "rgb(255 218 185)"
}

Der folgende Screenshot zeigt den obigen Code in Aktion, wenn die App auf Windows installiert ist, wobei das theme_color-Manifestmitglied als Farbe der Titelleiste verwendet wird:

Das Anwendungsfenster auf Windows zeigt die Thema-Farbe in der Titelleiste

Beziehung zum theme-color Meta-Element-Wert

Der theme-color Wert für das name Attribut des <meta> HTML-Elements kann verwendet werden, um eine Thema-Farbe pro Webseite zu definieren. Dies unterscheidet sich vom theme_color-Manifestmitglied, das Sie nur einmal, global, für Ihre App definieren.

Wenn beide festgelegt sind, überschreibt der theme-color Meta-Element-Wert das theme_color-Manifestmitglied. Dies ermöglicht es Ihnen, eine globale Farbe für Ihre App zu definieren und diese auf bestimmten Seiten zu überschreiben.

Beachten Sie, dass in einigen Browsern, wie Safari auf macOS und Chrome auf Android, der theme-color Meta-Element-Wert auch verwendet wird, um die Browser-UI zu stylen.

Siehe auch