Comment ajouter des thèmes sombres dans les applications Vue avec des variables CSS

L’implémentation de thèmes sombres dans nos applications web est passée d’un luxe à une nécessité. Les utilisateurs d’appareils souhaitent désormais passer de thèmes clairs à des thèmes sombres et vice versa, pour des raisons esthétiques et pratiques.

Les thèmes sombres offrent une palette de couleurs plus foncées pour les interfaces utilisateur, ce qui rend l’interface plus agréable à regarder dans les environnements à faible luminosité. Les thèmes sombres permettent également de préserver la durée de vie de la batterie sur les appareils dotés d’écrans OLED ou AMOLED.

Ces avantages et d’autres encore font qu’il est plus raisonnable de donner aux utilisateurs le choix de passer à des thèmes sombres.

Mise en place de l’application de test

Pour mieux comprendre comment ajouter des thèmes sombres dans Vue, vous devrez créer une application Vue simple pour tester votre développement.

Pour initialiser la nouvelle application Vue, exécutez la commande suivante depuis votre terminal :

Cette commande installera la dernière version de l’application create-vue qui permet d’initialiser les nouvelles applications Vue. Elle vous demandera également de choisir parmi un ensemble particulier de fonctionnalités. Vous n’avez pas besoin d’en sélectionner, car cela n’est pas nécessaire dans le cadre de ce tutoriel.

Ajoutez le modèle suivant au fichier App.vue dans le fichier src de votre application :

Le bloc de code ci-dessus décrit l’ensemble de l’application en HTML normal, sans script ni blocs de style. Vous utiliserez les classes du modèle ci-dessus à des fins de stylisme. La structure de l’application changera au fur et à mesure que vous mettrez en œuvre le thème sombre.

Voir aussi :  Les décorateurs Python : Qu'est-ce que c'est et comment l'utiliser ?

Styliser l’application de test avec des variables CSS

Les variables CSS, ou propriétés personnalisées CSS, sont des valeurs dynamiques que vous pouvez définir dans vos feuilles de style. Les variables CSS constituent un excellent outil pour la création de thèmes, car elles vous permettent de définir et de gérer des valeurs telles que les couleurs et les tailles de police en un seul endroit.

Vous utiliserez les variables CSS et les sélecteurs de pseudo-classes CSS pour ajouter un thème en mode normal et un thème en mode sombre à votre application Vue. Dans le src/assets créez un fichier styles.css dans le répertoire, créez un fichier styles.css .

Ajoutez les styles suivants à ce fichier styles.css :

Ces déclarations contiennent un sélecteur de pseudo-classe spécial ( :root) et un sélecteur d’attribut ([data-theme=’true’]). Les styles que vous incluez dans un sélecteur de racine ciblent l’élément parent le plus élevé. Il s’agit du style par défaut de la page web.

Le sélecteur de thème de données cible les éléments HTML dont l’attribut est défini sur true. Dans ce sélecteur d’attribut, vous pouvez alors définir des styles pour le thème du mode sombre, afin de remplacer le thème clair par défaut.

Ces déclarations définissent toutes deux des variables CSS à l’aide de la méthode préfixe. Ils stockent des valeurs de couleur que vous pouvez ensuite utiliser pour adapter l’application aux thèmes clairs et foncés.

Modifiez le préfixe src/main.js et importez le fichier styles.css :

Voir aussi :  Comment créer un générateur de code QR avec React

Ajoutez maintenant quelques styles supplémentaires dans styles.css sous le fichier data-theme . Certaines de ces définitions font référence aux variables de couleur à l’aide du sélecteur var . Cela vous permet de modifier les couleurs utilisées en changeant simplement la valeur de chaque variable, comme le font les styles initiaux.

Vous pouvez définir une propriété de transition sur tous les éléments à l’aide du sélecteur CSS universel (*) pour créer une animation fluide lors du passage d’un mode à l’autre :

Ces transitions créent un changement progressif de la couleur d’arrière-plan et de la couleur du texte lorsque l’on bascule en mode sombre, ce qui donne un effet agréable.

Mise en œuvre de la logique du mode sombre

Pour mettre en œuvre le mode sombre, vous aurez besoin d’une logique JavaScript pour basculer entre les thèmes clair et sombre. Dans votre App.vue collez le bloc de script suivant sous le bloc de modèle écrit dans l’API de composition de Vue :

Le script ci-dessus comprend toute la logique JavaScript permettant de basculer entre les modes clair et foncé de votre application web. Le script commence par un bloc import pour importer la fonction ref permettant de gérer les données réactives (données dynamiques) dans Vue.

Ensuite, il définit un getInitialDarkMode qui récupère les préférences de l’utilisateur en matière de mode sombre dans le champ LocalStorage du navigateur. Elle déclare la fonction darkMode et l’initialise avec les préférences de l’utilisateur récupérées par la fonction getInitialDarkMode.

La fonction saveDarkModePreference met à jour les préférences de l’utilisateur en matière de mode sombre dans le LocalStorage du navigateur avec la valeur setItem de l’utilisateur dans le LocalStorage du navigateur. Enfin, la méthode toggleDarkMode permet aux utilisateurs d’activer le mode sombre et de mettre à jour la valeur LocalStorage du navigateur pour le mode sombre.

Voir aussi :  Comment dessiner des graphiques dans Jupyter Notebook

Application du thème du mode sombre et test de l’application

Maintenant, dans le bloc de modèle de votre App.vue ajoutez le sélecteur d’attribut data-theme à l’élément racine pour appliquer conditionnellement le thème du mode sombre en fonction de votre logique :

Ici, vous liez le sélecteur data-theme à la référence darkMode. Cela permet de s’assurer que lorsque darkMode est vrai, le thème sombre prend effet. L’événement click listener sur le bouton permet de basculer entre les modes clair et foncé.

Exécutez la commande suivante dans votre terminal pour prévisualiser l’application :

Vous devriez voir un écran comme celui-ci :

Lorsque vous cliquez sur le bouton, l’application doit basculer entre les thèmes clair et foncé :

Apprenez à intégrer d’autres paquets dans vos applications Vue

Les variables CSS et l’API LocalStorage facilitent l’ajout d’un thème sombre à votre application Vue.

Il existe de nombreuses bibliothèques tierces et des extras Vue intégrés qui vous permettent de personnaliser vos applications web et d’utiliser des fonctionnalités supplémentaires.

Améliorez votre QI technologique grâce à nos lettres d’information gratuites

En vous abonnant, vous acceptez notre politique de confidentialité et pouvez recevoir des communications occasionnelles ; vous pouvez vous désabonner à tout moment.

Cliquez pour évaluer cet article !
[Total: Moyenne : ]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *