Anpassen der Themen- und Hintergrundfarben Ihrer App

Beim Erstellen von Progressive Web Apps (PWAs) ist es wichtig, nicht nur das Erscheinungsbild des App-Inhalts zu berücksichtigen, sondern auch, wie die App auf dem Gerät des Benutzers erscheint, sobald sie installiert ist.

Eine Möglichkeit, das Fenster anzupassen, in dem Ihre App erscheint, ist die Verwendung der theme_color und background_color Mitglieder des Web-App-Manifests.

Indem Sie die theme_color- und background_color-Mitglieder in Ihrem PWA-Manifest definieren, können Sie eine mehr ausgefeilte Erfahrung für Ihre Benutzer schaffen. Diese kleinen Details können dazu beitragen, dass sich Ihre PWA mehr wie eine OS-native App anfühlt und den Benutzern vertrauter erscheint.

Anpassen der Hintergrundfarbe des App-Fensters

Das background_color-Manifestmitglied definiert die Farbe, die im Anwendungsfenster erscheint, bevor die Stylesheets Ihrer App geladen wurden.

Da diese Farbe erscheint, bevor Ihre Stylesheets geladen sind, setzen Sie ihren Wert auf denselben Farbwert wie die background-color CSS-Eigenschaft in Ihrem Anwendungs-Stylesheet. Dies gewährleistet einen flüssigen visuellen Übergang beim Starten der Webanwendung und Laden ihres Inhalts.

Der Wert kann jeder gültige CSS <color> sein. In diesem Beispiel eines Web-App-Manifests 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 für 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 wurde:

Das App-Fenster, auf Windows, zeigt die peachpuff Hintergrundfarbe

Definieren einer Themenfarbe

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

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

  • Auf mobilen Geräten wird die Themenfarbe auf die Statusleiste angewendet.
  • Auf Desktop-Betriebssystemen wird die Themenfarbe verwendet, um die Titelleiste Ihres Stand-alone-App-Fensters zu gestalten.

Wählen Sie eine theme_color, die das Gesamtdesign und Branding Ihrer PWA ergänzt und auf einer Vielzahl von Geräten und Plattformen gut funktioniert, um eine konsistente Benutzererfahrung zu gewährleisten.

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

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, wo das theme_color Manifestmitglied als Farbe der Titelleiste verwendet wird:

Das App-Fenster, auf Windows, zeigt die Themenfarbe in der Titelleiste

Beziehung zum theme-color Meta-Elementwert

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

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

Beachten Sie, dass in einigen Browsern, wie Safari auf macOS und Chrome auf Android, der theme-color Meta-Elementwert auch zur Gestaltung der Browser-UI verwendet wird.

Siehe auch