theme_color

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Das theme_color-Element wird verwendet, um die Standardfarbe für die Benutzeroberfläche Ihrer Webanwendung anzugeben. Diese Farbe kann auf verschiedene UI-Elemente des Browsers angewendet werden, wie z. B. die Symbolleiste, die Adressleiste und die Statusleiste. Sie kann besonders in Kontexten wie dem Aufgabenumschalter oder wenn die App zum Startbildschirm hinzugefügt wird, auffällig sein.

Syntax

json
/* Valid named color */
"theme_color": "rebeccapurple"

/* Using hexadecimal value */
"theme_color": "#42b5f4"

/* Using RGB value */
"theme_color": "rgb(66 133 244)"

Werte

theme_color

Ein String, der einen gültigen Farbwert angibt.

Hinweis: Browser können die Alpha-Komponente der Farbe je nach Kontext ignorieren. In den meisten Umgebungen kann theme_color nicht transparent sein. Es wird empfohlen, vollständig opake Farben (Alphawert von 1 oder 100%) zu verwenden, um ein konsistentes Verhalten über verschiedene Plattformen und Browser hinweg sicherzustellen.

Beschreibung

Obwohl optional, ermöglicht die Angabe einer theme_color-Eigenschaft, die visuelle Identität Ihrer App über ihre Inhaltsbereiche hinaus zu erweitern. Diese Farbgebung kann ein nativeres App-Erlebnis für Ihre Webanwendung bieten, besonders wenn sie im standalone-Modus geladen wird. Wählen Sie eine theme_color, die mit den Markenrichtlinien Ihrer App übereinstimmt, da dies die Benutzererkennung und -erinnerung verbessern kann, insbesondere wenn Ihre App neben anderen Anwendungen oder Systemoberflächen angezeigt wird.

In Browsern, die theme_color unterstützen, dient der im Manifest angegebene Wert als Standardthemafarbe für Ihre Webanwendung auf allen Seiten, auf denen das Manifest angewendet wird. Sie können diesen Standard auf folgende Weise überschreiben:

  • Verwendung des theme-color-Werts des name-Attributs im HTML-<meta>-Element: Sie können eine Themafarbe für eine Webseite angeben, die sich von der Manifest-theme_color-Angabe Ihrer App unterscheidet. Dies ermöglicht Ihnen, unterschiedliche Themafarben für einzelne Seiten innerhalb Ihrer App festzulegen.

    html
    <meta name="theme-color" content="#9370DB" />

  • Kombination des <meta name="theme-color">-Elementes mit Media-Queries: Sie können die zu verwendende Themafarbe basierend auf der Farbvorliebe des Nutzers spezifizieren.

    html
    <meta
  name="theme-color"
  content="#F4E6D8"
  media="(prefers-color-scheme: light)" />
<meta
  name="theme-color"
  content="#5D4037"
  media="(prefers-color-scheme: dark)" />

Diese Überschreibungsmethoden bieten Ihnen die Flexibilität, das Erscheinungsbild Ihrer App an spezifische Seiten oder Benutzerpräferenzen anzupassen und verbessern so das gesamte Benutzererlebnis.

Browser können auch die angewendete Themafarbe basierend auf Benutzerpräferenzen anpassen. Wenn ein Benutzer eine Präferenz für den hellen oder dunklen Modus festgelegt hat, können Browser den Manifest-theme_color-Wert überschreiben, um jede in Ihrer App-CSS definierte prefers-color-scheme-Media-Query zu unterstützen.

css
body {
  background: #f8f9fa;
  color: #212529;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #212529;
    color: #f8f9fa;
  }
}

Beispiele

Verwendung einer benannten Farbe

json
{
  "theme_color": "red"
}

Verwendung eines RGB-Werts

json
{
  "theme_color": "rgb(66, 133, 244)"
}

Verwendung eines Hexadezimalwerts

json
{
  "name": "My First App",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ff4500"
}

Spezifikationen

Specification
Web Application Manifest
# theme_color-member

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch