Heim > Artikel > Web-Frontend > So erstellen Sie einen Dark Mode Toggle mit HTML, CSS und JavaScript

So erstellen Sie einen Dark Mode Toggle mit HTML, CSS und JavaScript

WBOYOriginal: 2024-08-29 15:00:26485Durchsuche

Hell oder dunkel? Theme-Wechsel mit einem Klick für barrierefreie Website

Websites und Anwendungen haben jetzt normalerweise zwei unterschiedliche Themen: ein helles Thema für bessere Sichtbarkeit tagsüber und ein dunkles Thema für weniger Augenbelastung bei Nacht. Um das beste Erlebnis zu bieten, sollte Ihre Website den Benutzern ermöglichen, je nach ihren Vorlieben einfach zwischen diesen Themen zu wechseln. In diesem Artikel erfahren Sie, wie Sie mithilfe von HTML, CSS und JavaScript einen Dunkelmodus-Schalter für Ihre Website erstellen, der es Benutzern ermöglicht, mit einem einzigen Klick zwischen hellen und dunklen Themen zu wechseln.

In diesem Tutorial erstellen wir eine Umschalttaste für Sonne und Mond, um den Hell- und Dunkelmodus darzustellen. Wenn ein Benutzer auf die Schaltfläche klickt, wechselt die Website reibungslos zwischen diesen beiden Modi. Außerdem speichern wir die Themenpräferenz des Benutzers im lokalen Speicher für zukünftige Besuche.

Sehen Sie sich die Demo oder den vollständigen Quellcode in diesem GitHub-Repository an. Sie können mit dieser Schritt-für-Schritt-Anleitung interaktiv lernen oder nach unten scrollen, um eine detaillierte Anleitung zu erhalten.

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass Sie Folgendes haben:

Grundkenntnisse in HTML, CSS und JavaScript
Ein Texteditor oder eine IDE (z. B. Visual Studio Code, Sublime Text)
Ein Webbrowser zum Testen

Einrichten der HTML-Struktur

Zuerst erstellen wir die grundlegende HTML-Struktur und fügen die notwendigen Elemente hinzu, um unsere Umschaltfläche und den Seiteninhalt zu erstellen.

1. Erstellen Sie eine neue HTML-Datei. Öffnen Sie Ihren Texteditor und erstellen Sie eine neue index.html Datei mit der grundlegenden HTML-Struktur, einschließlich DOCTYPE-, HTML-, Head- und Body-Tags. Fügen Sie den Titel-Tag für die Seite hinzu und importieren Sie die externen style.css und script.js Dateien.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Light/Dark Mode Toggle</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

2. Fügen Sie dem Body die erforderlichen Elemente hinzu. Innerhalb des Body-Tags fügen wir die folgenden Elemente hinzu:

Ein Container-Div zum Verpacken unseres gesamten Inhalts
Ein h1-Titel für die Seite
Einen Absatz für eine kurze Beschreibung
Ein Toggle-Container-Div, das unseren Kippschalter enthält
SVG-Symbole für Sonne und Mond

<body>
    <div class="container">
        <h1>Light/Dark Mode Toggle</h1>
        <p>Click the toggle below to switch between dark and light modes.</p>
        <div class="toggle-container" id="themeToggle">
            <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="5"></circle>
                <line x1="12" y1="1" x2="12" y2="3"></line>
                <line x1="12" y1="21" x2="12" y2="23"></line>
                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                <line x1="1" y1="12" x2="3" y2="12"></line>
                <line x1="21" y1="12" x2="23" y2="12"></line>
                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
            </svg>
            <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
            </svg>
        </div>
    </div>
    <script src="script.js"></script>
</body>

So sieht unsere einfache index.html-Datei aus:

How to Create a Dark Mode Toggle with HTML, CSS, and JavaScript

Hinzufügen von CSS-Styling für den Hell- und Dunkelmodus

In diesem Abschnitt gestalten wir unsere HTML-Elemente und erstellen helle und dunkle Modi. Wir verwenden außerdem Übergänge für sanfte Farbänderungen und steuern die Sichtbarkeit von Sonnen- und Mondsymbolen basierend auf dem aktuellen Modus.

3. Definieren Sie CSS-Variablen für helle und dunkle Farben. Öffnen Sie die Datei style.css in Ihrem Texteditor. Wir definieren CSS-Variablen für dunkle und helle Farben mithilfe des :root-Selektors. Dies ermöglicht später eine einfache Anpassung des Themes. Wenn Sie die dunklen oder hellen Farben ändern möchten, müssen Sie sie nur an einer Stelle aktualisieren.

/* Root selector for defining global CSS variables */
:root {
  --clr-dark: #333;  /* Dark color for text in light mode, background in dark mode */
  --clr-light: #fff; /* Light color for background in light mode, text in dark mode */
}

4. Richten Sie grundlegende CSS-Stile ein. Fügen Sie Stile für die Elemente body, .container und h1 hinzu, um das Layout und die Typografie Ihrer Seite festzulegen. Sie können diese Elemente nach Ihren Wünschen anpassen.

body Zentrieren Sie den Inhalt sowohl vertikal als auch horizontal, indem Sie CSS-Variablen für Farben und einen Übergang für sanfte Farbänderungen verwenden.
.container Zentrieren Sie den Inhalt in unserem Container.
h1 Fügen Sie etwas Platz unter der Überschrift hinzu.

/* Base styles for the body */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: var(--clr-light);
    color: var(--clr-dark);
    transition: background-color 0.3s, color 0.3s;
}
/* Container for centering content */
.container {
    text-align: center;
}
/* Heading styles */
h1 {
    margin-bottom: 20px;
}

5. Fügen Sie CSS-Stil für den Dunkelmodus hinzu. Erstellen Sie eine CSS-Klasse mit dem Namen .dark-mode, die die Hintergrund- und Textfarben vertauscht, wenn sie auf ein Element angewendet wird.

/* Styles for dark mode */
.dark-mode {
    background-color: var(--clr-dark);
    color: var(--clr-light);
}

6. Gestalten Sie die Umschaltsymbole. Fügen Sie Stile zu den SVG-Symbolen für Sonne und Mond hinzu und steuern Sie deren Sichtbarkeit basierend auf dem aktuellen Modus.

/* Styles for the toggle container */
.toggle-container {
    cursor: pointer;
}
/* Styles for the sun and moon icons */
.sun-icon, .moon-icon {
    width: 24px;
    height: 24px;
    transition: opacity 0.3s;
}
/* Hide moon icon by default (light mode) */
.moon-icon {
    display: none;
}
/* Show moon icon and hide sun icon in dark mode */
.dark-mode .sun-icon {
    display: none;
}
.dark-mode .moon-icon {
    display: inline-block;
}

Mit diesen CSS-Stilen verfügt Ihre Seite standardmäßig über ein helles Design. Die Eigenschaft „cursor: pointer“ macht deutlich, dass der Schalter anklickbar ist.

How to Create a Dark Mode Toggle with HTML, CSS, and JavaScript

Implementierung der JavaScript-Funktionalität

Da wir nun unsere HTML-Struktur und den CSS-Stil eingerichtet haben, ist es an der Zeit, unserem Dunkelmodus-Schalter mit JavaScript Interaktivität hinzuzufügen und lokalen Speicher zu implementieren, um die Präferenzen des Benutzers zu speichern.

7. Wählen Sie DOM-Elemente aus. Öffnen Sie die Datei script.js und wählen Sie die DOM-Elemente aus, die wir ändern möchten, die themeToggle-ID, die unsere Umschalttaste enthält.

const themeToggle = document.getElementById('themeToggle');
const body = document.body;

8. Add event listeners to the toggle button. This is the core functionality of the dark mode toggle. Add an event listener to the themeToggle element to detect when the user clicks on it. It will add the dark-mode class to the body element if it’s absent, or removes the class if present.

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

At this point, the toggle switch is functional, and clicking on it will switch between light and dark modes. However, if you reload the page while in dark mode, the website will revert to its default light mode.

9. Save user theme preferences in local storage. To save the user's theme preference even after the browser is closed, we'll use the localStorage object. Inside the event listener callback function, it checks if the body element has the dark-mode class.

If it does, localStorage.setItem() saves the 'dark-mode' value to the 'theme' key.
If it doesn't, localStorage.setItem() saves an empty string to the 'theme' key.

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

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

10. Check for a saved theme preference. When the page loads, we want to check if there's a saved theme preference in the local storage. Use localStorage.getItem() to retrieve the value associated with the 'theme' key. If a 'dark-mode' preference exists in the local storage, apply the dark mode theme immediately by adding the dark-mode class to the body element.

Note: Make sure to place the getItem() method before the event listener to ensure it runs on page load.

// Check if user preference exists in local storage
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
    body.classList.add(currentTheme);
}

The Dark Mode Toggle in Action

We've implemented all the necessary components for our dark mode toggle, so let's see it in action. Try clicking the toggle switch to see the smooth transition between light and dark themes. Refresh the page to verify your theme preference is remembered.

Check out the complete source code on this GitHub repository.

Tips for Dark Mode Implementation

Creating a dark mode toggle is just the beginning. To create a user-friendly dark mode experience, there are several best practices to keep in mind.

Tip #1: Choose the Right Colors for Dark Mode

Selecting colors for dark mode involves more than simply inverting your light theme. The goal is to create a contrast between text and background colors for readability. Use tools like color contrast checkers to verify that your chosen colors meet WCAG (Web Content Accessibility Guidelines) standards. Remember, a well-designed dark mode should be easy on the eyes and work well across devices.

Tip #2: Create a User-Friendly Toggle Button

Create a clear visual distinction between light and dark modes to help users identify each mode easily. Your toggle switch or button should clearly show the current mode. You can implement effective approaches such as a sun and moon icon toggle, which is used in this article and is an easily recognizable choice, a light and dark mode text button, or a sliding switch with light/dark mode labels. Whichever design you choose, make sure it's consistent with your user interface and provides clear feedback when the user interacts with it.

Tip #3: Implement Smooth Transitions

To create a more polished user experience, use CSS transitions or animations for a seamless shift between light and dark modes. Make sure that all elements, including images and icons, smoothly transition to the new color scheme. This can be done by adjusting opacity, brightness, or swapping out images for dark mode-specific versions.

Conclusion

Adding a dark mode toggle to your website greatly improves user experience. This is not just about aesthetics but also usability and accessibility. It allows users to view content comfortably based on their preferences and lighting conditions.

Throughout this article, we've walked through the process of creating a simple dark mode toggle, covering HTML structure, CSS styling for light and dark themes, JavaScript functionality, and storing user preference. The key is to keep it simple and user-friendly. Don't forget to test your dark mode thoroughly to ensure all elements remain readable and functional.

Now it's your turn to create your own dark mode toggle! Share your CodePen or GitHub link in the comments below.

In Verbindung stehende Artikel

Mehr sehen