--- title: "Créez des applications mobiles qui prennent automatiquement en charge le mode sombre" date: "2020-12-28" categories: - "app-development" - "mobile-development" tags: - "app-development" - "dark-theme" - "mobile-development-tools" - "mobiletogether" description: Découvrez comment créer des applications mobiles qui s'adaptent automatiquement au mode sombre grâce à Altova MobileTogether. Améliorez l'expérience utilisateur et optimisez efficacement l'autonomie de la batterie. --- Status: #blog Tags: #app-development #dark-theme #mobile-development-tools #mobiletogether Categories: [mobile-development](/blog/fr/category/mobile-development.md) | [mobile-development](/blog/fr/category/mobile-development.md) # Créez des applications mobiles qui prennent automatiquement en charge le mode sombre Les appareils mobiles Android et Apple prennent en charge une option d'affichage appelée "Thème sombre", que l'on peut considérer comme une sorte de négatif de l'affichage normal. En mode "Thème sombre", le blanc devient noir, le noir devient blanc, et l'intensité des couleurs est généralement ajustée. Le "Thème sombre" réduit la consommation d'énergie, ce qui peut prolonger l'autonomie de la batterie, et peut faciliter la lecture dans des conditions de faible luminosité. Altova MobileTogether intègre des fonctionnalités qui permettent aux développeurs de créer des applications mobiles prenant automatiquement en charge le mode sombre, en détectant les préférences de l'utilisateur au lancement de l'application. Examinons un exemple : ![](/blog/images/mt_darktheme_blog_1.jpg) Ci-dessous, vous trouverez deux captures d'écran d'une application mobile fonctionnant sur le même appareil, affichées respectivement avec le thème clair et le thème sombre. [![Captures d'écran de la même application mobile, affichées avec le thème clair et le thème sombre](/blog/images/image-1-1.png)](image-1-1.png) Cette application permet aux utilisateurs d'enregistrer la production d'énergie des panneaux solaires et la consommation d'électricité à partir des relevés de compteurs, et elle génère des graphiques pour visualiser les données et suivre les excédents au fil du temps. De nombreux systèmes de production d'énergie solaire résidentiels sont connectés au réseau électrique public et fonctionnent selon un système de facturation à bilan nul. Les panneaux solaires installés sur le toit fournissent de l'électricité à la maison uniquement lorsque le soleil brille. L'électricité est puisée dans le réseau pendant la nuit ou chaque fois que la demande dépasse la production. Lorsque le système produit plus d'électricité que ce que la maison consomme, l'excédent est réinjecté dans le réseau, ce qui contribue à augmenter la capacité de production de l'entreprise d'électricité. Altova MobileTogether facilite le travail des développeurs mobiles en leur permettant de.. [Créer des applications mobiles multiplateformes](https://www.altova.com/fr/mobiletogether) Dans l'outil MobileTogether Designer, qui combine des outils de conception d'interface utilisateur par glisser-déposer, le puissant langage de programmation visuelle Action Tree pour la gestion des événements, et une approche de programmation fonctionnelle standardisée pour la sélection et le traitement des données. Chaque composant de l'application est hautement personnalisable, mais par défaut, des éléments tels que les couleurs du texte, des boutons, les règles, les bordures, et même les arrière-plans des fenêtres, sont définis selon les paramètres par défaut du système pour chaque appareil. Le concepteur MobileTogether comprend une fenêtre d'aide "Styles" où les développeurs peuvent spécifier les paramètres généraux du projet, y compris un paramètre pour le thème clair ou sombre. [![Paramètres de style et de propriétés pour prendre automatiquement en charge le mode sombre dans une application mobile.](/blog/images/styles-window.png)](styles-window.png) Les options de configuration du thème sont les suivantes : "Utiliser les paramètres du système", "Forcer l'utilisation du thème clair" ou "Forcer l'utilisation du thème sombre". Par défaut, l'option sélectionnée est "Utiliser les paramètres du système", ce qui permet aux développeurs de prendre en charge automatiquement le thème sombre sans avoir à effectuer de modifications spécifiques. ### Prise en charge automatique du mode sombre dans les graphiques, avec possibilité de définir des couleurs personnalisées Certain éléments peuvent nécessiter des paramètres de couleur personnalisés, et les développeurs peuvent spécifier des alternatives pour le thème clair et le thème sombre. La première étape consiste à déterminer quel paramètre utilisateur est actuellement actif. MobileTogether inclut des variables globales qui permettent aux développeurs de détecter les paramètres de l'appareil de l'utilisateur au moment de l'exécution et de programmer des actions appropriées en fonction des fonctionnalités de l'appareil. La fenêtre de dialogue "Variables globales" de MobileTogether Designer affiche toutes les variables globales et leurs valeurs pour l'appareil de simulation sélectionné. [![Une variable globale permet de déterminer la couleur de fond de l'appareil utilisé par l'utilisateur pendant l'exécution du programme.](/blog/images/global-variables-1.png)](global-variables-1.png) La couleur de fond par défaut de l'écran pour un téléphone Android spécifique est indiquée ci-dessus. Cette valeur change si l'appareil est configuré en mode sombre. Une valeur hexadécimale plus faible indique une teinte plus foncée, tandis qu'une valeur plus élevée correspond à une teinte plus claire. La valeur hexadécimale #808080 correspond à la nuance de gris à 50 %. Nous pouvons créer une expression XPath pour tester cette valeur au moment de l'exécution, et supposer que toute couleur de fond par défaut plus foncée que le gris à 50 % indique que l'appareil est en mode sombre. L'évaluateur XPath dans la fenêtre de simulation du concepteur est un outil pratique pour déterminer la syntaxe exacte de l'expression : [![Une expression XPath permettant de renvoyer le code de couleur pour le noir ou le blanc, en fonction de la couleur de fond par défaut de l'appareil mobile](/blog/images/xpath-expression.png)](xpath-expression.png) Cette expression convertit la chaîne hexadécimale en un entier, le compare à la valeur correspondant à 50 % de gris, et sélectionne la valeur de la chaîne pour le noir ou le blanc en fonction du résultat. C'est une expression utile pour sélectionner automatiquement une couleur de texte pour un thème clair ou un thème sombre. Appliquons-la donc dans une fonction utilisateur : ![Implémenter l'expression dans une fonction utilisateur.](/blog/images/user-function.png) MobileTogether comprend des fonctionnalités qui permettent de créer facilement [des graphiques et diagrammes riches](https://www.altova.com/fr/mobiletogether/enterprise-apps) qui ont la même apparence sur toutes les plateformes. L'application exemple "Solar Tool" présentée en haut utilise un diagramme en barres pour illustrer la production quotidienne d'énergie solaire, superposé à un diagramme en aires qui montre la consommation d'électricité. Les développeurs choisissent les paramètres de ces graphiques à partir d'une série de boîtes de dialogue de création de graphiques, comme la boîte de dialogue "Modifier l'apparence" présentée ici : [![Boîte de dialogue "Apparence du graphique" pour créer le même graphique sur toutes les plateformes](/blog/images/chart-creation.png)](chart-creation.png) De nombreux éléments de configuration permettent de définir des couleurs, comme la couleur de fond et la couleur de la bordure, comme dans cet exemple. Cependant, nous avons un contrôle total pour modifier ces paramètres par défaut grâce aux paramètres XPath dynamiques, qui sont évalués sur l'appareil client au moment de l'exécution. [![Option XPath dynamique pour affiner les paramètres des éléments graphiques.](/blog/images/chart-config.png)](chart-config.png) En cliquant sur ce bouton, une fenêtre de dialogue s'ouvre, offrant des options pour définir une valeur XPath ou une expression pour chaque élément du graphique. Dans l'image ci-dessous, nous avons défini les valeurs pour tous les éléments qui sont spécifiés comme étant soit noirs, soit blancs dans les boîtes de dialogue des paramètres du graphique. Nous avons défini les éléments initialement blancs pour qu'ils utilisent la couleur de fond par défaut, et nous avons configuré les éléments noirs, tels que le texte et les bordures, pour qu'ils utilisent notre fonction AutoTextColor(). ![Utilisation d'une variable globale et d'une fonction définie par l'utilisateur pour prendre en charge automatiquement le mode sombre](/blog/images/dynamic-xpath.png) Nous avons défini d'autres éléments, comme les lignes de grille pour chaque axe, dans les boîtes de dialogue des paramètres de création, en utilisant une nuance de gris clair qui convient aux deux thèmes. Il existe une boîte de dialogue distincte pour les paramètres XPath dynamiques pour chaque couche de chaque graphique, mais une fois que tous ces paramètres sont configurés, c'est terminé. Les graphiques seront automatiquement créés correctement, que vous utilisiez le thème clair ou le thème sombre. Voici un téléphone Android affichant les graphiques de l'excédent cumulé, en mode sombre et en mode clair : [![Voici une autre vue de l'application, affichée en mode sombre et en mode clair](/blog/images/android-app-1.png)](android-app-1.png) Si vous souhaitez créer des applications mobiles intuitives qui prennent automatiquement en charge le mode sombre en fonction des préférences de l'utilisateur, téléchargez gratuitement le logiciel [MobileTogether Designer](https://www.altova.com/fr/mobiletogether/download). N'oubliez pas de consulter la page [MobileTogether Demos](https://www.altova.com/fr/mobiletogether/demos), qui contient des liens vers des vidéos, des tutoriels et d'autres applications de démonstration.