Thèmes du mode sombre

Le mode sombre offre aux utilisateurs la possibilité de définir une préférence de couleur à l’échelle du système (introduit sur Android 10 et iOS 13). Les thèmes sombres sont conçus pour préserver la durée de vie de la batterie et réduire la fatigue oculaire des utilisateurs. Les développeurs d’applications disposent aussi d’un moyen plus simple d’implémenter les thèmes de couleur sombre que les utilisateurs préfèrent.

Les messages in-app Braze prennent en charge un thème sombre distinct pour que les messages s’affichent dans la couleur appropriée en fonction des préférences utilisateur, tout en assurant la cohérence avec la conception de votre application.

Fonctionnement du mode sombre

Les utilisateurs avec des versions à partir d’Android 10 ou iOS 13 peuvent basculer en mode sombre dans les réglages de leur appareil.

Lorsque le mode sombre est activé, les menus et écrans natifs de l’appareil (notifications push, paramètres de l’appareil, etc.) deviennent gris foncé. Les applications peuvent également prendre en charge le mode sombre si les autres thèmes sont indiqués dans leur code.

Définition d’un thème du mode sombre

La nouvelle option Mode sombre, située dans l’onglet Style lors de la création d’un message in-app, vous permet d’ajouter facilement un thème de couleur alternatif pour les utilisateurs qui sont en mode sombre sur leur appareil.

Lorsque cette option est activée, vous pouvez choisir des couleurs de thème sombres pour votre message in-app à l’aide du sélecteur de couleurs, ou en sélectionnant les profils de couleurs existants pour réutiliser les thèmes sombres ou clairs existants.

Utilisation continue du mode sombre

Pour utiliser le mode sombre pour tous les messages in-app, accédez à Modèles > Modèles de messages in-app.

Sélectionnez ensuite Créer un profil de couleur dans la liste déroulante. Créez un profil de couleur qui correspond à votre thème du mode sombre. Puis, chaque fois que vous créez une version en mode sombre d’un message in-app, vous pouvez sélectionner ce profil de couleur et conserver la cohérence de l’apparence de vos messages in-app.

Compatibilité

• Vos utilisateurs doivent disposer d’appareils iOS version 13 ou supérieure, ou d’appareils Android version 10 ou supérieure.
• SDK iOS Braze v3.21.0+ SDK Android Braze v3.8.0+ requis.

Utilisation de messages in-app HTML

Pour créer des thèmes sombre et clair pour les messages in-app HTML, vous pouvez utiliser la fonction média CSS prefers-color-scheme afin de détecter la préférence de l’utilisateur.

Par exemple :

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;
  }
}