Hey! Wenn Sie also wie ich sind und die ganze Dark-Mode-Atmosphäre lieben, haben Sie vielleicht darüber nachgedacht, ihn Ihrer Website hinzuzufügen. Die Einrichtung ist mit ein wenig CSS und JavaScript ziemlich einfach. So habe ich es gemacht.

Schritt 1: HTML einrichten

Zunächst benötigen Sie eine Schaltfläche oder einen Schalter, auf den Benutzer klicken können, um zwischen hellem und dunklem Modus umzuschalten. Ich habe mich für dieses Beispiel für eine einfache Schaltfläche entschieden (Sie können bei Bedarf ein Symbol verwenden):

Toggle Dark Mode

Diese Schaltfläche wird der Auslöser für den Moduswechsel sein.

Schritt 2: Hinzufügen des CSS für den Hell- und Dunkelmodus

Als nächstes müssen Sie definieren, wie Ihr Hell- und Dunkelmodus aussehen soll. In Ihrem CSS richten Sie die Standardstile ein (die Ihr heller Modus sein werden) und fügen dann eine Klasse für den dunklen Modus hinzu, die diese Stile überschreibt.

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

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

Hier ist, was passiert:

• Lichtmodus (Standard): Der Körper hat einen weißen Hintergrund und schwarzen Text. Ich habe einen Übergang hinzugefügt, um den Wechsel beim Wechsel zwischen den Modi reibungslos zu gestalten.
• Dunkler Modus: Die .dark-mode-Klasse ändert den Hintergrund in Dunkelgrau und den Text in Weiß.

Schritt 3: Mit JavaScript zwischen den Modi wechseln

Jetzt kommt der Teil, in dem wir dafür sorgen, dass die Schaltfläche tatsächlich etwas tut. Dieser Teil von JavaScript schaltet die .dark-mode-Klasse im Textkörper um, wenn auf die Schaltfläche geklickt wird.

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');
    }
});

Hier ist eine Aufschlüsselung:

• Klasse umschalten: Wenn auf die Schaltfläche geklickt wird, schalten wir die .dark-mode-Klasse im Körper um. Dadurch werden die Stile zwischen hellem und dunklem Modus geändert.
• Präferenz speichern: Ich habe ein kleines Extra hinzugefügt, indem ich die Präferenz des Benutzers in localStorage gespeichert habe. Das heißt, wenn sie den Dunkelmodus wählen, bleibt dies auch dann so, wenn sie die Website verlassen und wieder besuchen.

Schritt 4: Laden der Benutzereinstellungen beim Laden der Seite

Um sicherzustellen, dass die Website im bevorzugten Modus des Benutzers geladen wird, müssen Sie localStorage überprüfen, wenn die Seite geladen wird, und den Modus entsprechend festlegen.

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

Wenn Sie React verwenden, ist der Prozess ziemlich ähnlich, aber Sie erledigen die Dinge innerhalb Ihrer Komponenten. So geht's:

1. Status und CSS-Klasse für den Dunkelmodus einrichten:

Verwenden Sie den useState von React, um den Dunkelmodusstatus zu verwalten, und wenden Sie die entsprechende Klasse auf Ihr Stammelement an:

   import React, { useState } from 'react';

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

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

       return (
           

               
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               
           
       );
   }

   export default App;

In diesem Beispiel:

• Der DarkMode-Status bestimmt, ob der Dunkelmodus aktiv ist.
• Die Funktion toggleDarkMode schaltet den Dunkelmodus ein und aus.

1. CSS für den Dunkelmodus:

Fügen Sie die .dark-mode-Klasse wie zuvor zu Ihrem CSS hinzu:

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

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

1. Lokaler Speicher:

Wenn Sie möchten, dass die Theme-Präferenz bestehen bleibt, können Sie diese kleine Änderung hinzufügen:

   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 (
           

                setDarkMode(!darkMode)}>
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               
           
       );
   }

   export default App;

Hier ist, was passiert:

• Anfangszustand: Der Anfangszustand von darkMode wird basierend auf dem in localStorage gespeicherten Wert festgelegt.
• Effekt-Hook: Der useEffect-Hook speichert die aktuelle Designeinstellung, wenn sich DarkMode ändert.

Und das ist es! Dies ist eine einfachere Möglichkeit, Ihrer React-App den Dunkelmodus hinzuzufügen, ohne die Dinge zu verkomplizieren.