Implémentation d'un mode sombre pour les applications mobiles natives
De nos jours, la plupart des téléphones portables disposent d'une fonction intégrée permettant à l'utilisateur de basculer entre le mode clair et le mode sombre. Si le téléphone de l'utilisateur est déjà en mode sombre mais qu'il existe une application qui ne peut pas être réglée et qui brille de mille feux en mode clair, cela perturbera l'expérience globale de l'utilisateur lors de l'utilisation de l'application. Pour cette raison, il est important de savoir comment implémenter un mode sombre pour les applications mobiles natives.
Heureusement avec Mendix, le processus est simple car une grande partie du code a été pré-construite en arrière-plan.
Veuillez noter que ce tutoriel est basé sur une application native créée dans Mendix Version du modeleur 9.20. Les choses peuvent différer dans d'autres versions.
De quoi parle cet article
Dans cet article, nous verrons comment créer un mode sombre pour Mendix applications mobiles natives. Le résultat final est de faire en sorte que l'application passe automatiquement en mode sombre (ou en mode clair) en fonction du paramètre mobile de l'utilisateur. Si son téléphone est déjà en mode sombre, l'application s'affichera en mode sombre, et vice versa.
Qu'est-ce que ce post pas à propos
Veuillez noter que cet article n'est PAS un tutoriel sur la façon de créer un commutateur à bascule entre un mode clair et un mode sombre. (Vous pouvez en savoir plus à ce sujet dans : Comment implémenter le mode sombre dans vos applications) Ce que nous recherchons aujourd'hui, c'est comment faire en sorte que votre application passe automatiquement à sa version en mode sombre lorsque le téléphone de l'utilisateur est en mode sombre.
Tutoriel
Étape 1 : Créer un module de thème personnalisé
Lors de la création d'un module de thème personnalisé, la méthode utilisée est similaire à celle utilisée pour créer un module de thème personnalisé pour les applications Web. Faites un clic droit dans l'explorateur d'applications et sélectionnez « Ajouter un module ».
Assurez-vous de le renommer de manière reconnaissable. Par exemple, si votre marque s'appelle « Smith Company », le module de thème peut être quelque chose comme « smith_theme ». Dans l'exemple, j'ai renommé mon module en « sampleapp_theme ».
Nous devons également marquer ce module comme un module de ressources d'interface utilisateur. Faites un clic droit sur le module et choisissez « Marquer ceci comme un module de ressources d'interface utilisateur ». Le module devrait alors devenir vert.
Le marquer comme un module de ressources d’interface utilisateur peut aider l’équipe à localiser rapidement où se trouve le style personnalisé.
La création d'un module de thème personnalisé est une méthode efficace pour regrouper tous les styles liés à une marque spécifique en un seul endroit. Si vous devez réutiliser le même style dans une autre application appartenant à cette marque, vous pouvez simplement exporter le module de thème personnalisé et l'importer dans votre nouvelle application.
Dans les applications mobiles natives, des classes personnalisées sont ajoutées au fichier « main.js » dans votre module de thème personnalisé. Ce fichier se trouve dans : themesource > [votre module de thème personnalisé] > main.js
C'est également ici que nous ajouterons la fonctionnalité du mode sombre.
Étape 2 : Ajoutez le module requis pour créer un mode sombre
Afin de créer un mode sombre pour l'application, nous devons ajouter deux éléments au fichier « main.js ».
Tout d’abord, nous devons ajouter le module « Apparence » en haut du fichier. L’ajout de ce module nous permet de déterminer le schéma de couleurs préféré de l’application. (Pour en savoir plus sur « Apparence », veuillez vous référer à ce lien : https://reactnative.dev/docs/appearance).
Deuxièmement, nous devons ajouter une variable « darkMode ». Cela est nécessaire avant de pouvoir implémenter une version en mode sombre pour des composants spécifiques de l’application. Le code ressemble à ceci :
Étape 3 : Testez-le
Dans cet exemple, j'ai créé un conteneur d'onglets avec du texte et des images :
Lorsque nous exécutons l’application maintenant, elle ressemble à ceci :
Remarque : voici à quoi ressemble actuellement l'application en mode clair et en mode sombre.
Donnons une classe au conteneur d'onglets. Double-cliquez sur le conteneur d'onglets et accédez à « Apparence » et attribuez-lui une classe. Dans cet exemple, ma classe est « sampleTab » :
Remarque : la classe doit être en camel case (la première lettre du premier mot est en minuscule et la première lettre des mots suivants sera en majuscule).
Dans le fichier « main.js », modifions la couleur de fond de l’onglet, l’indicateur (c’est-à-dire le soulignement de l’onglet sélectionné), le libellé et le libellé actif :
Comme indiqué dans le commentaire de la ligne 8, le format d'ajout d'un style alternatif pour le mode sombre consiste à ajouter darkmode ? [mode sombre] : [mode clair] à la propriété de la variable.
Sauvegardez tout et exécutez le projet.
Résultats
Voici le résultat en mode clair :
Voici le résultat en mode sombre :
N'hésitez pas à jouer avec la couleur et le contraste pour le mode clair et le mode sombre. Voici une version plus sophistiquée de l'application pour votre référence.
Mode léger:
Remarque : l'image du livre est ma propre création.
Mode sombre:
Remarque : l'image du livre est ma propre création.
Le fichier de projet pour la version la plus sophistiquée, y compris la mise en page de l'application sur le modeleur Studio Pro et le code, peut être téléchargé ici : https://www.mendix.com/wp-content/uploads/DarkModeSampleApp-2.mpk_.zip
Merci d'avoir appris et j'espère que vous avez apprécié ce tutoriel !