Pourquoi le mode sombre ?
Qui n'aime pas le mode sombre ? Il est partout de nos jours, de votre site Web préféré à vos applications de bureau en passant par vos appareils mobiles. En ce qui concerne l'expérience client, c'est une excellente flèche à ajouter à votre carquois pour une expérience fluide que les utilisateurs apprécieront. Cela soulève donc la question suivante : « Comment puis-je implémenter le mode sombre dans mon Mendix application?"
Je suis ici pour vous dire comment et c'est assez simple !
La première chose que nous allons faire est de trouver une application nécessitant le traitement du mode sombre. Pour ceux d'entre vous qui ont assisté au dernier Mendix Monde, vous connaissez peut-être Lato Bikes – la société que nous avons créée pour démontrer une Mendix parcours d'adoption en Discours d'ouverture de Johan den Haan.
La page des produits en particulier est très lumineuse et pourrait bénéficier du traitement en mode sombre. Voyons comment procéder.
Le mode sombre, étape par étape
Tout d'abord, nous allons ajouter un nouveau module à notre projet appelé DarkMode et nous ajouterons un rôle d'utilisateur unique au module (tout le monde devrait être autorisé à utiliser le mode sombre !). Dans ce nouveau module, nous allons créer un fichier SASS appelé _darkmode.scss. — Assurez-vous de l'ajouter au fichier principal en tant qu'importation !
Ensuite, dans notre nouveau fichier SASS, nous allons commencer à créer notre thème sombre. J'aime le faire comme une substitution à tout, donc je commence généralement par quelque chose comme ça :
corps html{
couleur d'arrière-plan : $gris-plus foncé ;
couleur :#fff ;
h1, h2, h3, h4, h5, .widget-eventTime, .widget-timeline-title, h6, .h1, .h2, .h3, .h4, .h5, .h6{
couleur :#fff ;
}
//Continuez à ajouter des styles ici…
}
Petit à petit, je modifierai les couleurs d'arrière-plan, les bordures et les couleurs de police jusqu'à ce que je sois satisfait de l'aspect général. Quelque chose comme ça…
Une fois que vous avez un thème qui vous convient, nous allons devoir le rendre commutable afin qu'un client puisse choisir s'il souhaite l'utiliser ou non. Pour les besoins de cette démonstration, nous allons le créer sous forme de bascule qui s'applique à cette session, mais il pourrait facilement devenir un paramètre permanent lié au compte d'un client. Pour ce faire, vous devrez ajouter un élément supplémentaire à votre fichier SASS.
Ajoutez au « corps html » un style « .darkmode ». Cela signifie que votre nouvelle apparence sera appliquée chaque fois que la classe « darkmode » sera ajoutée au corps.
La prochaine étape consiste à ajouter une entité pour suivre si le mode sombre est activé ou désactivé. Nous allons la rendre non persistante pour cette démonstration et la lier à la session du client. Nous allons ensuite définir la sécurité sur « lecture seule » pour l'association et sur « lecture/écriture » pour l'indicateur Activé.
Après cela, nous allons donner au client un moyen de l'activer et de le désactiver. Nous allons récupérer quelques icônes et les ajouter à une nouvelle collection d'images, une pour le mode clair et une pour le mode sombre.
Ensuite, nous allons créer un extrait qui aura un contrôle Switch pour basculer cette valeur booléenne. Il devra utiliser l'entité DarkMode que nous avons créée précédemment. Tout d'abord, l'extrait qui devrait ressembler à ceci…
Les colonnes supplémentaires à la fin permettent de le centraliser s'il est placé dans une grande zone, et vous remarquerez que la source de données n'est pas une entrée de contexte sur l'extrait, mais un DataView. En effet, nous allons le placer dans le modèle de mise en page afin que le commutateur soit disponible sur chaque page. Lorsque vous utilisez un extrait sur un modèle de mise en page, il doit charger sa propre source de données et, dans ce cas, nous le faisons avec un DataView et un Microflow.
La source de données Microflow est DS_DarkMode et doit renvoyer soit l'entité DarkMode liée à la session en cours, soit, s'il n'y en a pas déjà une, en renvoyer une nouvelle liée à la session en cours. Cela devrait ressembler à ceci…
La dernière chose à faire sur le Snippet est de donner au Switch un événement OnChange. Cet événement doit déclencher un Nanoflow. J'ai appelé le Nanoflow OCh_DarkModeToggle et tout ce que Nanoflow fait est d'appeler une action JavaScript. Cette action ajoutera ou supprimera la classe « darkmode » au corps lorsqu'elle sera appelée. Cela pourrait simplement être fait en utilisant la méthode de basculement de classe JavaScript, mais j'ai décidé de la rendre plus explicite afin qu'elle puisse être utilisée absolument.
Tout d’abord, j’ai créé l’action avec un paramètre IsEnabled, puis j’ai ajouté cette fonction :
exporter la fonction asynchrone JS_DarkMode(isEnabled) {
// DÉBUT DU CODE UTILISATEUR
si(estactivé){
document.body.classList.add(“mode sombre”);
}autre{
document.body.classList.remove(“mode sombre”);
}
// CODE UTILISATEUR FINAL
}
L’étape finale consiste à ajouter votre extrait dans votre modèle de mise en page et vous êtes prêt à partir !
Une fois publié, vous trouverez un contrôle Switch dans votre en-tête et en le faisant glisser, vous devriez appliquer et supprimer le style du mode sombre. Si vous souhaitez aller plus loin, vous pouvez même détecter le thème du bureau du client et l'utiliser pour choisir d'appliquer ou non le mode sombre.
si(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches){
document.body.classList.add(“mode sombre”);
}
J'espère que cela vous a aidé dans la mise en œuvre du mode sombre ! Si c'est le cas, contactez-nous et envoyez-nous des captures d'écran ou des liens. Nous aimerions voir comment cela fonctionne pour vous !