Thèmes en mode sombre

Cet article s’applique à l’éditeur traditionnel. Le mode sombre offre aux utilisateurs la possibilité de définir une préférence de couleur à l’échelle du système (introduite sur Android 10 et iOS 13). Les thèmes « sombres » sont conçus pour économiser la batterie et réduire la fatigue oculaire des utilisateurs, tout en offrant aux développeurs d’applications un moyen d’implémenter des thèmes de couleurs sombres.

Les messages in-app de Braze prennent en charge l’ajout d’un thème sombre alternatif pour délivrer le bon message en termes de couleurs à vos utilisateurs en fonction de leurs préférences et maintenir la cohérence avec le design de votre application.

Comment fonctionne le mode sombre

Les utilisateurs disposant au minimum d’Android 10 ou d’iOS 13 et versions ultérieures peuvent activer ou désactiver le mode sombre dans les paramètres 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.) passent en gris foncé. Les applications peuvent également choisir de prendre en charge le mode sombre en spécifiant les thèmes alternatifs dans le code de l’application.

Définir un thème en 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 couleurs alternatif pour les utilisateurs qui sont en mode sombre sur leur appareil.

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

Utiliser le mode sombre de manière cohérente

Pour utiliser le mode sombre pour tous les messages in-app, allez dans Modèles > Modèles de messages in-app.

À partir de là, sélectionnez Créer un profil de couleurs dans le menu déroulant. Créez un profil de couleurs qui correspond à votre thème en mode sombre. Ensuite, chaque fois que vous créez une version en mode sombre d’un message in-app, vous pouvez sélectionner ce profil de couleurs et conserver une apparence cohérente pour 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.
• Le SDK Braze pour iOS v3.21.0+ et le SDK Braze pour Android v3.8.0+ sont requis.

Utiliser des messages in-app HTML

Pour créer un thème sombre et un thème clair pour les messages in-app HTML, vous pouvez utiliser la fonctionnalité média CSS prefers-color-scheme pour 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;
  }
}