Dark-Mode-Themes

Dieser Artikel gilt für den traditionellen Editor. Der Dark Mode bietet Nutzer:innen die Möglichkeit, eine systemweite Farbpräferenz festzulegen (eingeführt mit Android 10 und iOS 13). „Dunkle“ Themes sollen den Akkuverbrauch senken und die Augen der Nutzer:innen schonen, während sie App-Entwickler:innen die Möglichkeit bieten, dunkle Farbthemen zu implementieren.

Braze In-App-Nachrichten unterstützen das Hinzufügen eines alternativen Dark-Themes, um Ihren Nutzer:innen basierend auf deren Präferenz die passende Farbnachricht zu liefern und die Konsistenz mit dem Design Ihrer App zu wahren.

So funktioniert der Dark Mode

Nutzer:innen mit mindestens Android 10 oder iOS 13 und höher können den Dark Mode in den Geräteeinstellungen ein- oder ausschalten.

Wenn der Dark Mode aktiviert ist, wechseln die nativen Menüs und Bildschirme des Geräts (Push-Benachrichtigungen, Geräteeinstellungen usw.) zu einem dunklen Grau. Apps können den Dark Mode ebenfalls unterstützen, indem alternative Themes im App-Code festgelegt werden.

Ein Dark-Mode-Theme einrichten

Der Dark Mode befindet sich im Tab Entwerfen beim Erstellen einer In-App-Nachricht und ermöglicht es Ihnen, ein alternatives Farbthema für Nutzer:innen hinzuzufügen, die den Dark Mode auf ihrem Gerät verwenden.

Wenn diese Option aktiviert ist, können Sie dunkle Themenfarben für Ihre In-App-Nachricht über den Farbwähler auswählen oder vorhandene Farbprofile verwenden, um bestehende dunkle oder helle Themes wiederzuverwenden.

Hinweis

Sie können dieses Feature auch nutzen, wenn Ihre App kein eigenes dunkles Theme anbietet. Geräte, die den Dark Mode nicht unterstützen, zeigen jedoch standardmäßig das helle Theme an. Das Ändern des Geräte-Themes auf Android, während eine In-App-Nachricht angezeigt wird, ändert nicht das Theme, das für diese In-App-Nachricht verwendet wird.

Den Dark Mode konsistent verwenden

Um den Dark Mode für alle In-App-Nachrichten zu verwenden, erstellen Sie zunächst ein Farbprofil, das zu Ihrem Dark-Mode-Theme passt.

1. Gehen Sie zu Content > In-App Message.
2. Wählen Sie Templates erstellen und dann Farbprofil aus dem Dropdown-Menü.
3. Erstellen und speichern Sie Ihr Farbprofil.

Wenn Sie eine Dark-Mode-Version einer In-App-Nachricht erstellen, können Sie dieses Farbprofil auswählen, um das Erscheinungsbild Ihrer In-App-Nachrichten konsistent zu halten.

Kompatibilität

• Ihre Nutzer:innen müssen iOS-Geräte mit Version 13 oder höher oder Android-Geräte mit Version 10 oder höher verwenden.
• Braze iOS SDK v3.21.0+ und Braze Android SDK v3.8.0+ sind erforderlich.

Hinweis

Dark-Mode-Apps wurden mit Android 10 und iOS 13 eingeführt. Nutzer:innen, die ihre Geräte nicht mindestens auf diese Versionen aktualisiert haben, sehen nur das helle Theme.

Campaigns werden weiterhin an alle Nutzer:innen ausgeliefert, die für die von Ihnen ausgewählte Zielgruppe berechtigt sind, unabhängig von der Dark-Mode-Einstellung oder der Betriebssystemversion der Nutzer:innen.

HTML-In-App-Nachrichten verwenden

Um ein dunkles und helles Theme für HTML-In-App-Nachrichten zu erstellen, können Sie das CSS-Media-Feature prefers-color-scheme verwenden, um die Präferenz der Nutzer:innen zu erkennen.

Zum Beispiel:

1
2
3
4
5
6
7
8
9
10
11
12
13
@media (prefers-color-scheme: dark) {
  body {
    background: #333;
    color: white;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background: white;
    color: #555;
  }
}