L’intégration de thèmes sombres dans les applications web est devenue une exigence fondamentale plutôt qu’un simple avantage. Les utilisateurs d’appareils aspirent désormais à alterner entre les thèmes clairs et sombres, motivés par des considérations esthétiques et pratiques.
Les thèmes sombres proposent une palette de couleurs plus atténuées pour les interfaces utilisateur, ce qui les rend agréables à l’œil dans des environnements à faible luminosité. De plus, ces thèmes contribuent à prolonger l’autonomie de la batterie sur les appareils équipés d’écrans OLED ou AMOLED.
Ces atouts, parmi d’autres, rendent le passage aux thèmes sombres plus qu’un simple choix, une nécessité pour de nombreux utilisateurs.
Mise en place de l’application de test
Pour mieux appréhender l’ajout de thèmes sombres dans Vue, il est judicieux de créer une application Vue simple pour tester vos développements.
Afin d’initialiser votre nouvelle application Vue, exécutez la commande suivante dans votre terminal :
npm init vue@latest
Cette commande installera la dernière version du package create-vue, outil permettant d’initier de nouvelles applications Vue. Il vous sera également demandé de choisir parmi un éventail de fonctionnalités. Vous pouvez ignorer cette étape, car elle n’est pas indispensable pour ce tutoriel.
Copiez le modèle suivant dans le fichier App.vue, situé dans le répertoire src de votre application :
<template>
<div>
<h1 class="header">Bienvenue dans mon application Vue</h1>
<p>Ceci est une simple application Vue avec du texte et des styles.</p>
<div class="styled-box">
<p class="styled-text">Texte Stylisé</p>
</div><button class="toggle-button">Activer/Désactiver le Mode Sombre</button>
</div>
</template>
Le bloc de code ci-dessus décrit la structure de base de l’application en HTML, sans aucun script ni bloc de style. Les classes du modèle serviront à définir les styles. Au fur et à mesure que le thème sombre sera implémenté, la structure de l’application évoluera.
Mise en style de l’application de test avec des variables CSS
Les variables CSS, également appelées propriétés personnalisées CSS, sont des valeurs dynamiques que vous pouvez définir dans vos feuilles de style. Elles offrent des outils puissants pour la création de thèmes, car elles 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 des variables CSS et des sélecteurs de pseudo-classe CSS pour ajouter un thème standard et un thème en mode sombre à votre application Vue. Dans le répertoire src/assets, créez un fichier nommé styles.css.
Ajoutez les styles suivants dans 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 comprennent un sélecteur de pseudo-classe spécifique (:root) et un sélecteur d’attribut ([data-theme=’true’]). Les styles inclus dans le sélecteur racine ciblent l’élément parent de plus haut niveau. Il sert 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. Vous pouvez y définir les styles du thème en mode sombre, remplaçant ainsi le thème clair par défaut.
Ces deux déclarations définissent des variables CSS à l’aide du préfixe –. Elles stockent des valeurs de couleur que vous utiliserez pour styliser l’application, tant pour les thèmes clairs que 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 des styles supplémentaires dans styles.css, sous le sélecteur de thème de données. Certaines de ces définitions utiliseront des variables de couleur via le mot-clé var. Cela 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 en utilisant le sélecteur CSS universel
* {
transition: background-color 0.3s, color 0.3s;
}
afin de créer une animation fluide lors du changement de mode :
Ces transitions produisent un changement progressif de la couleur d’arrière-plan et de la couleur du texte lorsque le mode sombre est activé, offrant un effet visuel agréable.
Implémentation de la logique du mode sombre
<script setup>
import { ref } from 'vue';// Fonction pour récupérer la préférence initiale du mode sombre à partir du stockage local
const getInitialDarkMode = () => {
const userPreference = localStorage.getItem('darkMode');
return userPreference === 'true' ? true : false;
};// Définir la référence pour darkMode et l'initialiser avec la préférence de l'utilisateur
// ou false
const darkMode = ref(getInitialDarkMode());// Fonction pour enregistrer la préférence du mode sombre dans le stockage local
const saveDarkModePreference = (isDarkMode) => {
localStorage.setItem('darkMode', isDarkMode);
};// Fonction pour activer/désactiver le mode sombre et mettre à jour la préférence de stockage local
const toggleDarkMode = () => {
darkMode.value = !darkMode.value;
saveDarkModePreference(darkMode.value);
};
</script>
Pour implémenter le mode sombre, vous aurez besoin d’une logique JavaScript pour basculer entre les thèmes clair et sombre. Dans votre fichier App.vue, collez le bloc de script suivant sous le bloc modèle, en utilisant l’API de composition de Vue :
Ce script contient toute la logique JavaScript nécessaire pour basculer entre les modes clair et sombre dans votre application web. Le script commence par une instruction d’importation pour importer la fonction ref, qui gère 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 du mode sombre de l’utilisateur à partir du LocalStorage du navigateur. La référence darkMode est déclarée, initialisée 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 le LocalStorage du navigateur à l’aide de la méthode setItem. Enfin, la fonction toggleDarkMode permettra aux utilisateurs de basculer en mode sombre et de mettre à jour la valeur du LocalStorage du navigateur pour le mode sombre.
Application du thème du mode sombre et test de l’application
<template>
conditionnellement -->
<div :data-theme="darkMode">
<h1 class="header">Bienvenue dans mon application Vue</h1>
<p>Ceci est une simple application Vue avec du texte et des styles.</p>
<div class="styled-box">
<p class="styled-text">Texte Stylisé</p>
</div>
<button @click="toggleDarkMode" class="toggle-button">
Activer/Désactiver le Mode Sombre
</button>
</div>
</template>
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 sombre en fonction de votre logique :
Ici, le sélecteur de thème de données est lié à la référence darkMode. Ainsi, lorsque darkMode est vrai, le thème sombre est activé. Le gestionnaire d’événement click sur le bouton permet de basculer entre les modes clair et sombre.
npm run dev
Exécutez la commande suivante dans votre terminal afin de prévisualiser l’application :
Vous devriez voir un écran similaire à celui-ci :
En cliquant sur le bouton, l’application devrait basculer entre les thèmes clairs et sombres :
Découvrez comment intégrer d’autres packages dans vos applications Vue
Les variables CSS et l’API LocalStorage simplifient grandement l’ajout d’un thème sombre à votre application Vue.
De nombreuses bibliothèques tierces et extensions Vue intégrées existent, vous permettant de personnaliser vos applications web et d’exploiter des fonctionnalités avancées.