Découvrez les variables CSS et l'API LocalStorage avec ce projet Vue pratique.
Implémenter des thèmes sombres dans nos applications Web est passé d'un luxe à une nécessité. Les utilisateurs d'appareils souhaitent désormais passer des thèmes clairs aux thèmes sombres et vice versa pour des raisons esthétiques et pratiques.
Les thèmes sombres offrent une palette de couleurs plus sombres pour les interfaces utilisateur, ce qui rend l'interface agréable à regarder dans les environnements faiblement éclairés. Les thèmes sombres aident également à préserver la durée de vie de la batterie sur les appareils dotés d'écrans OLED ou AMOLED.
Ces avantages et bien d’autres encore rendent plus raisonnable le choix des utilisateurs de passer aux thèmes sombres.
Configuration 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 :
npm init vue@latest
Cette commande installera la dernière version de créer-vue package, le package pour initialiser de nouvelles applications Vue. Il 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 didacticiel.
Ajoutez le modèle suivant au App.vue déposer dans votre dossier de candidature src annuaire:
<template>
<div>
<h1class="header">Welcome to My Vue Apph1>
<p>This is a simple Vue app with some text and styles.p>
<divclass="styled-box">
<pclass="styled-text">Styled Textp>
div>
<buttonclass="toggle-button">Toggle Dark Modebutton>
div>
template>
Le bloc de code ci-dessus décrit l'ensemble de l'application en HTML standard, sans script ni bloc de style. Vous utiliserez les classes du modèle ci-dessus à des fins de style. Au fur et à mesure que vous implémenterez le thème sombre, la structure de l’application changera.
Styliser l'application de test avec des variables CSS
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 fournissent d'excellents outils 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 la taille des polices en un seul endroit.
Vous utiliserez des variables CSS et des sélecteurs de pseudo-classe CSS pour ajouter un thème standard et un thème en mode sombre pour votre application Vue. Dans le src/actifs répertoire, créez un styles.css déposer.
Ajoutez les styles suivants à ce fichier styles.css :
/* styles.css */
:root {
--background-color: #ffffff; /* White */
--text-color: #333333; /* Dark Gray */
--box-background: #007bff; /* Royal Blue */
--box-text-color: #ffffff; /* White */
--toggle-button: #007bff; /* Royal Blue */
}
[data-theme='true'] {
--background-color: #333333; /* Dark Gray */
--text-color: #ffffff; /* White */
--box-background: #000000; /* Black */
--box-text-color: #ffffff; /* White */
--toggle-button: #000000; /* Black */
}
Ces déclarations contiennent un sélecteur de pseudo-classe spécial (:racine) et un sélecteur d'attribut ([thème de données = 'true']). Les styles que vous incluez dans un sélecteur racine ciblent l'élément parent le plus élevé. Il fait office de style par défaut pour 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'attributs, vous pouvez ensuite 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 en utilisant le -- préfixe. Ils stockent les valeurs de couleur que vous pouvez ensuite utiliser pour styliser l'application pour les thèmes clairs et sombres.
Modifier le src/main.js et importez le fichier styles.css :
// main.js
import'./assets/styles.css'
import { createApp } from'vue'
import App from'./App.vue'
createApp(App).mount('#app')
Ajoutez maintenant quelques styles supplémentaires dans styles.css, sous le thème de données sélecteur. Certaines de ces définitions feront référence aux variables de couleur en utilisant le var mot-clé. Cela vous permet de modifier les couleurs utilisées simplement en changeant la valeur de chaque variable, comme le font les styles initiaux.
* {
background-color: var(--background-color);
text-align: center;
color: var(--text-color);
padding: 20px;
font-family: Arial, sans-serif;
transition: background-color 0.3s, color 0.3s;
}
.header {
font-size: 24px;
margin-bottom: 20px;
}
.styled-box {
background-color: var(--box-background);
color: var(--box-text-color);
padding: 10px;
border-radius: 5px;
margin: 20px 0;
}
.styled-text {
font-size: 18px;
font-weight: bold;
}
.toggle-button {
background-color: var(--toggle-button);
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
padding: 5px 10px;
}
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 changement de mode :
* {
/* Add more transitions as needed */
transition: background-color 0.3s, color 0.3s;
}
Ces transitions créent un changement progressif de la couleur d'arrière-plan et de la couleur du texte lorsque le mode sombre est activé, donnant un effet agréable.
Implémentation de la logique du mode sombre
Pour implémenter le mode thème sombre, vous aurez besoin d'une logique JavaScript pour basculer entre les thèmes clairs et sombres. Dans ton App.vue fichier, collez le bloc de script suivant sous le bloc de modèle écrit dans API de composition de Vue :
<scriptsetup>
import { ref } from 'vue';// Function to get the initial dark mode preference from local storage
const getInitialDarkMode = () => {
const userPreference = localStorage.getItem('darkMode');
return userPreference 'true'? true: false;
};// Define the ref for darkMode and initialize it with the user preference
// or false
const darkMode = ref(getInitialDarkMode());// Function to save the dark mode preference to local storage
const saveDarkModePreference = (isDarkMode) => {
localStorage.setItem('darkMode', isDarkMode);
};
// Function to toggle dark mode and update the local storage preference
const toggleDarkMode = () => {
darkMode.value = !darkMode.value;
saveDarkModePreference(darkMode.value);
};
script>
Le script ci-dessus inclut toute la logique JavaScript pour basculer entre les modes clair et sombre dans votre application Web. Le scénario commence par un importer instruction pour importer la fonction ref pour gérer les données réactives (données dynamiques) dans Vue.
Ensuite, il définit un getInitialDarkMode fonction qui récupère la préférence de mode sombre de l’utilisateur à partir de le navigateur Stockage local. Il déclare le Mode sombre ref, en l'initialisant avec la préférence de l'utilisateur récupérée par la fonction getInitialDarkMode.
Le saveDarkModePréférence La fonction met à jour la préférence de mode sombre de l'utilisateur dans le LocalStorage du navigateur avec le setItem méthode. Finalement, le basculer le mode sombre La fonction permettra aux utilisateurs de basculer le mode sombre et de mettre à jour la valeur LocalStorage du navigateur pour le mode sombre.
Application du thème du mode sombre et test de l'application
Maintenant, dans le bloc modèle de votre App.vue fichier, 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 :
<template>
<div:data-theme="darkMode">
<h1class="header">Welcome to My Vue Apph1>
<p>This is a simple Vue app with some text and styles.p>
<divclass="styled-box">
<pclass="styled-text">Styled Textp>
div>
<button @click="toggleDarkMode"class="toggle-button">
Toggle Dark Mode
button>
div>
template>
Ici, vous liez le sélecteur de thème de données à la référence darkMode. Cela garantit que lorsque Mode sombre est vrai, le thème sombre prendra effet. L'écouteur d'événement de clic sur le bouton bascule entre les modes clair et sombre.
Exécutez la commande suivante dans votre terminal pour prévisualiser l'application :
npm run dev
Vous devriez voir un écran comme celui-ci :
Lorsque vous cliquez sur le bouton, l'application doit basculer entre les thèmes clairs et sombres :
Apprenez à intégrer d'autres packages 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 extras Vue intégrés qui vous permettent de personnaliser vos applications Web et d'utiliser des fonctionnalités supplémentaires.