Quand l’appareil de l’utilisateur est en mode sombre, votre flow peut adapter ses couleurs et ses arrière-plans en conséquence — afficher un dégradé plus sombre ou une image adaptée au thème. Pour configurer cela, vous utilisez des styles avec une version distincte pour chaque thème — clair et sombre.

Chaque version est un remplissage : une couleur unie, un dégradé, une image ou une vidéo. Un seul remplissage peut combiner plusieurs éléments : une couche de couleur semi-transparente peut teinter l’image en dessous. Si les deux thèmes sont identiques, les deux versions peuvent l’être aussi.

Il vous suffit d’appliquer le style à un élément, et le flow utilise automatiquement la bonne version selon le mode de l’appareil.

Ajouter un thème sombre

Par défaut, un nouveau flow utilise un thème clair. Pour ajouter un thème sombre :

1. Ouvrez le panneau Styles et sélectionnez l’onglet Colors.
2. Cliquez sur l’icône pour ouvrir le menu de gestion des thèmes.
3. Sélectionnez Add dark theme. La variante sombre est ajoutée à chaque style de couleur, avec deux valeurs identiques. Vous pouvez maintenant configurer le thème sombre.

Configurer le thème sombre

Après avoir ajouté le thème sombre, chaque entrée de la liste Color Style dispose de deux paramètres spécifiques au thème : Light et Dark.

Pour modifier un style :

1. Ouvrez le panneau Styles
2. Sélectionnez l’onglet Colors.
3. Cliquez sur une entrée de style. Si le style nécessaire n’existe pas encore, créez-en un nouveau.
4. La valeur Light et la valeur Dark sont listées l’une après l’autre. Chaque valeur peut contenir plusieurs couches. Cliquez sur l’échantillon pour définir la couche selon son type de remplissage :
   • Couleur unie
   • Dégradé
   • Image ou vidéo
5. Cliquez sur Save.

Les valeurs Light et Dark peuvent utiliser différents types de remplissage.

Combiner différents types de remplissage

Vous pouvez combiner librement les types de remplissage entre les deux versions d’un style :

• Couleurs unies, dégradés et images : Dans n’importe quelle combinaison. Par exemple, un arrière-plan peut être une couleur unie en mode clair et une image en mode sombre.
• Vidéos : Si la version claire inclut une vidéo, la version sombre doit également inclure une vidéo — et vice versa. Les deux vidéos peuvent être différentes.

Appliquer le thème à un élément

Si la propriété d’un élément n’utilise pas de style de couleur, le thème sombre ne s’y applique pas. Les éléments Image et Vidéo n’ont pas de style de couleur : pour changer leur fichier en mode sombre, ajoutez un fichier sombre.

Pour qu’un élément suive le thème, cliquez sur la pastille de sa couche de remplissage, de sa couleur de texte, de sa couleur de bordure ou de sa couleur d’icône. Remplacez la valeur statique par le style en cliquant sur l’onglet Styles et en sélectionnant l’entrée de style. Si aucun style ne correspond à la valeur dont vous avez besoin, enregistrez la valeur actuelle en tant que style.

L’arrière-plan d’un écran suit le thème de la même façon : appliquez le style à sa couche de remplissage dans Screen settings. Pour les étapes, consultez Afficher un arrière-plan différent en mode sombre.

Pour appliquer un style à de nombreux éléments d’un écran, demandez à l’éditeur IA, par exemple : Apply the Card background style to all cards.

Prévisualiser le flow en mode sombre

Cliquez sur les icônes de thème sous le canvas pour basculer entre Dark mode et Light mode.

Ces icônes n’apparaissent que si le flow possède un thème sombre, ou un élément Image ou Vidéo avec un fichier sombre.

Afficher une image ou vidéo différente en mode sombre

Un élément Image ou Vidéo affiche son fichier dans les deux modes jusqu’à ce que vous ajoutiez un fichier pour le mode sombre. Pour afficher un fichier différent en mode sombre :

1. Sélectionnez l’élément Image ou Vidéo.
2. Dans la section Image ou Video du panneau de propriétés, sélectionnez l’onglet Dark. Le canevas bascule vers l’aperçu en mode sombre.
3. Importez le fichier pour le mode sombre.

Pour modifier à nouveau le fichier en mode clair, sélectionnez l’onglet Light.

Définir le thème de la barre d’état

Les icônes d’heure et de batterie dans la barre d’état peuvent entrer en conflit avec les couleurs de votre flow dans l’un des modes. Pour garder les icônes lisibles, définissez le Status bar theme dans Screen settings lorsque le commutateur Status bar est activé :

• : Icônes blanches, pour un fond sombre dans les deux modes.
• : Icônes noires, pour un fond clair dans les deux modes.
• : Icônes qui suivent le paramètre de l’appareil, pour un fond clair dans un mode et sombre dans l’autre.

Supprimer un thème

1. Ouvrez le panneau Styles et sélectionnez l’onglet Colors.
2. Cliquez sur l’icône de paramètres pour ouvrir le menu de gestion des thèmes.
3. Sélectionnez un élément du menu :
   • Delete Dark theme : conserve la version claire de chaque style de couleur pour les deux modes.
   • Delete Light theme : conserve la version sombre de chaque style de couleur pour les deux modes.