Comment ajouter facilement le mode sombre à votre site Web

Hé ! Donc, si vous êtes comme moi et que vous aimez toute l’ambiance du mode sombre, vous avez peut-être pensé à l’ajouter à votre site Web. C'est assez facile à configurer avec juste un peu de CSS et de JavaScript. Voici comment j'ai procédé.

Étape 1 : Configuration du HTML

Tout d'abord, vous avez besoin d'un bouton ou d'un interrupteur sur lequel les utilisateurs peuvent cliquer pour basculer entre les modes clair et sombre. J'ai opté pour un simple bouton pour cet exemple (vous pouvez utiliser une icône si vous le souhaitez) :

<button id="dark-mode-toggle">Toggle Dark Mode</button>

Ce bouton va être le déclencheur du changement de mode.

Étape 2 : Ajout du CSS pour les modes clair et sombre

Ensuite, vous devez définir à quoi ressembleront votre mode clair et votre mode sombre. Dans votre CSS, vous configurerez les styles par défaut (qui seront votre mode clair), puis ajouterez une classe de mode sombre qui remplace ces styles.

body {
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

Voici ce qui se passe :

• Mode lumière (par défaut) : Le corps a un fond blanc et un texte noir. J'ai ajouté une transition pour rendre le changement fluide lors du passage d'un mode à l'autre.
• Mode sombre : La classe .dark-mode change l'arrière-plan en gris foncé et le texte en blanc.

Étape 3 : Basculer entre les modes avec JavaScript

Vient maintenant la partie où nous faisons en sorte que le bouton fasse réellement quelque chose. Ce morceau de JavaScript fera basculer la classe .dark-mode sur le corps chaque fois que vous cliquerez sur le bouton.

const toggleButton = document.getElementById('dark-mode-toggle');
const body = document.body;

toggleButton.addEventListener('click', () => {
    body.classList.toggle('dark-mode');

    // Save the user's preference in local storage
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
});

Voici une répartition :

• Basculer la classe : Lorsque vous cliquez sur le bouton, nous basculons la classe .dark-mode sur le corps. Cela change les styles entre les modes clair et sombre.
• Enregistrement des préférences : J'ai ajouté un petit plus en enregistrant les préférences de l'utilisateur dans localStorage. Cela signifie que s’ils choisissent le mode sombre, cela restera ainsi même s’ils quittent et reviennent sur le site.

Étape 4 : Chargement des préférences de l'utilisateur lors du chargement de la page

Pour vous assurer que le site se charge dans le mode préféré de l'utilisateur, vous devez vérifier localStorage lors du chargement de la page et définir le mode en conséquence.

window.addEventListener('load', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        body.classList.add('dark-mode');
    }
});

Si vous utilisez React, le processus est assez similaire, mais vous gérerez les choses au sein de vos composants. Voici comment procéder :

1. Configurer l'état et la classe CSS pour le mode sombre :

Utilisez useState de React pour gérer l'état du mode sombre et appliquez la classe appropriée à votre élément racine :

   import React, { useState } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(false);

       const toggleDarkMode = () => {
           setDarkMode(!darkMode);
       };

       return (
           <div className={darkMode ? 'dark-mode' : ''}>
               <button onClick={toggleDarkMode}>
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               </button>
           </div>
       );
   }

   export default App;

Dans cet exemple :

• L'état darkMode détermine si le mode sombre est actif.
• La fonction toggleDarkMode active et désactive le mode sombre.

1. CSS pour le mode sombre :

Ajoutez la classe .dark-mode à votre CSS, comme avant :

   body {
       background-color: white;
       color: black;
       transition: background-color 0.3s, color 0.3s;
   }

   .dark-mode {
       background-color: #121212;
       color: #ffffff;
   }

1. Stockage local :

Si vous souhaitez que la préférence de thème persiste, vous pouvez ajouter ce petit ajustement :

   import React, { useState, useEffect } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(() => {
           const savedTheme = localStorage.getItem('theme');
           return savedTheme === 'dark';
       });

       useEffect(() => {
           localStorage.setItem('theme', darkMode ? 'dark' : 'light');
       }, [darkMode]);

       return (
           <div className={darkMode ? 'dark-mode' : ''}>
               <button onClick={() => setDarkMode(!darkMode)}>
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               </button>
           </div>
       );
   }

   export default App;

Voici ce qui se passe :

• État initial : L'état initial de darkMode est défini en fonction de la valeur stockée dans localStorage.
• Effect Hook : Le hook useEffect enregistre la préférence de thème actuelle chaque fois que darkMode change.

Et c'est tout ! C'est un moyen plus simple d'ajouter le mode sombre à votre application React sans trop compliquer les choses.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!