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

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 du package create-vue, le package permettant d’initialiser les 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 fichier App.vue dans le répertoire src de votre application :

 
<template>
  <div>
    <h1 class="header">Welcome to My Vue App</h1>
    <p>This is a simple Vue app with some text and styles.</p>
    
    <div class="styled-box">
      <p class="styled-text">Styled Text</p>
    </div>
    <button class="toggle-button">Toggle Dark Mode</button>
  </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

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 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 répertoire src/assets, créez un fichier styles.css.

Ajoutez les styles suivants à ce fichier styles.css :

 
:root {
  --background-color: #ffffff; 
  --text-color: #333333; 
  --box-background: #007bff; 
  --box-text-color: #ffffff; 
  --toggle-button: #007bff; 
}
  
[data-theme="true"] {
  --background-color: #333333; 
  --text-color: #ffffff; 
  --box-background: #000000; 
  --box-text-color: #ffffff; 
  --toggle-button: #000000; 
}

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 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.

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

 
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 sélecteur de thème de données. Certaines de ces définitions feront référence aux variables de couleur à l’aide du mot-clé var. 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

 * {
  
  transition: background-color 0.3s, color 0.3s;
}

pour créer une animation fluide lors du changement de mode :

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

 
<script setup>
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>
 

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 votre fichier App.vue, collez le bloc de script suivant sous le bloc modèle écrit dans l’API de composition de Vue :

Le script ci-dessus inclut toute la logique JavaScript pour basculer entre les modes clair et sombre dans votre application Web. Le script commence par une instruction import pour importer la fonction ref pour gérer les données réactives (données dynamiques) dans Vue.

Ensuite, il définit une fonction getInitialDarkMode qui récupère la préférence de mode sombre de l’utilisateur à partir du LocalStorage du navigateur. Il déclare la référence darkMode, en l’initialisant avec la préférence de l’utilisateur récupérée par la fonction getInitialDarkMode.

La fonction saveDarkModePreference met à jour la préférence de mode sombre de l’utilisateur dans LocalStorage du navigateur avec la méthode setItem. Enfin, la fonction toggleDarkMode permettra aux utilisateurs de basculer en 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

 
<template>
  
       conditionally -->
  <div :data-theme="darkMode"> 
    <h1 class="header">Welcome to My Vue App</h1>
    <p>This is a simple Vue app with some text and styles.</p>
    
    <div class="styled-box">
      <p class="styled-text">Styled Text</p>
    </div>
     
    <button @click="toggleDarkMode" class="toggle-button">
      Toggle Dark Mode
    </button> 
  </div>
</template>
 

Maintenant, dans le bloc modèle de votre fichier 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 de thème de données à la référence darkMode. Cela garantit que lorsque darkMode 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.

 npm run dev

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 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.