Créer un basculement en mode sombre avec Next.js et Tailwind CSS
As a web developer, you may be wondering how to create a dark mode toggle for your web application. In this tutorial, we will explore how to implement a dark mode toggle with Next.js and Tailwind CSS.
Introduction
Les avantages de la mise en œuvre d'un mode sombre dans une application Web sont nombreux. Cela peut aider à réduire la fatigue oculaire, améliorer la lisibilité et même économiser la batterie sur les appareils mobiles. La tendance au mode sombre est de plus en plus populaire et il n'est pas surprenant que les utilisateurs l'attendent désormais comme une fonctionnalité standard dans leurs applications préférées.
Next.js est un framework React qui fournit un rendu côté serveur, facilitant la création d'applications Web performantes et évolutives. Tailwind CSS est un framework CSS axé sur l'utilité qui permet de styliser rapidement et facilement des applications Web.
Dans ce didacticiel, nous utiliserons Next.js et Tailwind CSS pour créer une bascule en mode sombre pour notre application Web.
1. Mise en place du projet
Pour commencer, nous devons installer Next.js et Tailwind CSS. Nous pouvons installer Next.js en exécutant la commande suivante dans notre terminal :
npx create-next-app my-app
Une fois Next.js installé, nous pouvons installer Tailwind CSS en exécutant la commande suivante :
npm install tailwindcss
Après avoir installé Tailwind CSS, nous devons créer la structure de base de notre application. Nous pouvons le faire en créant un nouveau fichier appelé index.js dans pages répertoire de notre projet.
Dans ce fichier, nous pouvons ajouter du HTML de base pour afficher notre contenu :
<!DOCTYPE html>
<html>
<head>
<title>Dark Mode Toggle</title>
</head>
<body>
<div class="container mx-auto py-4">
<h1 class="text-4xl font-bold mb-4">Welcome to my Dark Mode Toggle!</h1>
<p class="text-lg">Click the button below to switch between light and dark mode.</p>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Toggle Theme
</button>
</div>
</body>
</html>
Nous pouvons ensuite ajouter un style de base à notre application en utilisant Tailwind CSS. Nous pouvons le faire en créant un nouveau fichier appelé styles.css dans styles répertoire de notre projet..
Dans ce fichier, nous pouvons ajouter le code suivant pour appliquer certains styles de base à notre application :
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
background-color: #f7fafc;
.container {
max-width: 800px;
2. Mise en œuvre du basculement du mode sombre
Maintenant que notre structure d’application de base et notre style sont terminés, nous pouvons passer à l’implémentation de la fonctionnalité de basculement du mode sombre.
Pour ce faire, nous devons créer une variable d'état pour suivre le thème préféré de l'utilisateur. Nous pouvons le faire en ajoutant le code suivant à notre fichier index.js:
import { useState from "react";
export default function Home() {
const [theme, setTheme] = useState("light");
return (
<div className={theme === "light" ? "bg-white" : "bg-gray-800 <div className="container mx-auto py-4">
<h1 className="text-4xl font-bold mb-4">Welcome to my Dark Mode Toggle!</h1>
<p className="text-lg">Click the button below to switch between light and dark mode.</p>
<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
onClick={() => setTheme(theme === "light" ? "dark" : "light >
Toggle Theme
</button>
</div>
</div>
);
Dans ce code, nous utilisons le useState hook de React pour créer une variable d'état appelée theme. La valeur par défaut de theme est définie sur "light".
Nous utilisons également un opérateur ternaire pour appliquer conditionnellement une couleur d'arrière-plan à notre application en fonction du thème préféré de l'utilisateur. Si l'utilisateur a sélectionné le thème clair, nous appliquons une couleur d'arrière-plan blanche.
Si l'utilisateur a sélectionné le thème sombre, nous appliquons une couleur d'arrière-plan gris foncé.
Nous utilisons également un gestionnaire d'événements onClick pour basculer le thème préféré de l'utilisateur entre clair et sombre.
3. Améliorer l'expérience utilisateur
Maintenant que nous avons implémenté les fonctionnalités de base de notre bascule en mode sombre,
nous pouvons améliorer l'expérience utilisateur en ajoutant des fonctionnalités supplémentaires.
Tout d'abord, nous pouvons conserver la préférence de thème de l'utilisateur à l'aide de localStorage. Nous pouvons le faire en ajoutant le code suivant à notre fichier index.js :
import { useEffect, useState from "react";
export default function Home() {
const [theme, setTheme] = useState("light");
useEffect(() => {
const savedTheme = localStorage.getItem("theme");
if (savedTheme) {
setTheme(savedTheme);
[]);
useEffect(() => {
localStorage.setItem("theme", theme);
[theme]);
return (
<div className={theme === "light" ? "bg-white" : "bg-gray-800 <div className="container mx-auto py-4">
<h1 className="text-4xl font-bold mb-4">Welcome to my Dark Mode Toggle!</h1>
<p className="text-lg">Click the button below to switch between light and dark mode.</p>
<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
onClick={() => setTheme(theme === "light" ? "dark" : "light >
Toggle Theme
</button>
</div>
</div>
);
Dans ce code, nous utilisons le useEffect hook de React pour charger le thème préféré de l'utilisateur depuis localStorage lorsque le composant est monté. Nous utilisons également un autre useEffect hook pour enregistrer le thème préféré de l'utilisateur dans localStorage chaque fois qu'il change.
Ensuite, nous pouvons ajouter des animations à notre bouton bascule pour améliorer les commentaires des utilisateurs. Nous pouvons le faire en ajoutant le code suivant à notre fichier styles.css :
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
background-color: #f7fafc;
.container {
max-width: 800px;
.theme-toggle {
position: fixed;
bottom: 2rem;
right: 2rem;
.theme-toggle-button {
width: 60px;
height: 30px;
border-radius: 15px;
position: relative;
.theme-toggle-button::before {
content: "";
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 0;
left: ${({ theme => (theme === "light" ? "0" : "30px") transition: all .2s ease-in-out;
.theme-toggle-button::after {
content: "";
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #000;
position: absolute;
top: 0;
right: ${({ theme => (theme === "light" ? "0" : "30px") transition: all .2s ease-in-out;
.theme-toggle-button:hover::before {
transform: scale(1.2);
.theme-toggle-button:hover::after {
transform: scale(1.2);
Dans ce code, nous utilisons CSS pour créer un bouton bascule avec deux états : clair et foncé. Nous utilisons également des transitions CSS pour animer le bouton lorsqu'il est survolé.
Enfin, nous pouvons implémenter une requête média pour basculer automatiquement entre les thèmes clairs et sombres en fonction des paramètres de l'appareil de l'utilisateur. Nous pouvons le faire en ajoutant le code suivant à notre fichier styles.css file:
@tailwind base;
@tailwind components;
@tailwind utilities;
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
.text-gray-800 {
color: #fff;
}
}
Dans ce code, nous utilisons une requête multimédia pour vérifier le jeu de couleurs préféré de l'utilisateur. Si l'utilisateur a sélectionné un jeu de couleurs sombres, nous appliquons une couleur d'arrière-plan sombre et modifions la couleur du texte en blanc.
4. Conclusion
Résumé : Nous avons abordé la création d'une bascule en mode sombre dans Next.js et Tailwind CSS, y compris la configuration du projet, l'implémentation de la fonctionnalité de bascule, l'amélioration de l'expérience utilisateur avec le stockage local et les animations, et la commutation automatique des thèmes en fonction des paramètres de l'appareil.
En implémentant un bouton de basculement en mode sombre dans votre application Web, vous pouvez améliorer l'expérience utilisateur et rester à jour avec les tendances de conception actuelles. Avec Next.js et Tailwind CSS, créer un bouton de basculement en mode sombre est simple et rapide.
Si vous souhaitez personnaliser et améliorer davantage la fonctionnalité de bascule, vous pouvez explorer la documentation de Next.js et Tailwind CSS pour en savoir plus sur leurs capacités.