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 destinés à préserver l’autonomie de la batterie et à réduire la fatigue visuelle des utilisateurs, tout en offrant aux développeurs d’applications un moyen de mettre en œuvre des thèmes de couleurs sombres.

Les messages in-app de Braze prennent en charge l’ajout d’un thème alternatif Dark pour délivrer le bon message de couleur à vos utilisateurs en fonction de leurs préférences et maintenir la cohérence avec le design 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

Le mode sombre, situé dans l’onglet Conception lors de la création d’un message in-app, vous permet d’ajouter 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;
  }
}