Der einfachste Weg, den Dunkelmodus zu Ihrer Website hinzuzufügen-js-Tutorial-php.cn

Der einfachste Weg, den Dunkelmodus zu Ihrer Website hinzuzufügen

WBOY

Freigeben： 2024-07-29 04:46:23

Original

567 Leute haben es durchsucht

The Easiest Way to Add Dark Mode to Your Website

Die Möglichkeit, Websites und Anwendungen im Dunkelmodus zu nutzen, erfreut sich in den letzten Jahren zunehmender Beliebtheit. Es entlastet die Augen, verlängert die Akkulaufzeit von OLED-Bildschirmgeräten und bietet einen ästhetisch ansprechenden Ersatz für das traditionelle Lichtthema. Dieses Tutorial zeigt Ihnen, wie Sie mit JavaScript Themen und CSS-Variablen umschalten, um Ihrer Website den Dunkelmodus hinzuzufügen.

Schritt 1: Einrichten Ihres HTML

Beginnen wir zunächst mit einer grundlegenden HTML-Struktur. Erstellen Sie eine index.html-Datei mit folgendem Inhalt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to Dark Mode Tutorial</h1>
        <button id="theme-toggle">Toggle Dark Mode</button>
    </header>
    <main>
        <p>This is a sample website to demonstrate dark mode implementation.</p>
    </main>
    <script src="script.js"></script>
</body>
</html>

Nach dem Login kopieren

Diese HTML-Datei enthält eine Kopfzeile mit einem Titel und einer Schaltfläche zum Umschalten des Dunkelmodus, einen Hauptinhaltsbereich mit etwas Text und Links zu unseren CSS- und JavaScript-Dateien.

Schritt 2: CSS-Variablen definieren

Jetzt definieren wir die Variablen in unserem CSS. Erstellen Sie eine styles.css-Datei mit folgendem Inhalt:

:root {
    --background-color: #ffffff;
    --text-color: #000000;
    --header-background-color: #f1f1f1;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

header {
    background-color: var(--header-background-color);
    padding: 20px;
    text-align: center;
}

button {
    padding: 10px 20px;
    margin-top: 20px;
    cursor: pointer;
}

.dark-mode {
    --background-color: #181818;
    --text-color: #ffffff;
    --header-background-color: #242424;
}

Nach dem Login kopieren

Wir verwenden :root, um eine Gruppe von CSS-Variablen in dieser CSS-Datei zu definieren. Für den Lichtmodus bestimmen diese Variablen die Hintergrundfarbe, die Textfarbe und die Hintergrundfarbe der Kopfzeile. Zusätzlich wird eine Klasse .dark-mode definiert, deren Einstellungen Vorrang vor diesen Variablen haben. Ein nahtloser Übergang zwischen den Themen wird durch die Übergangseigenschaft des Körperelements gewährleistet.

Schritt 3: JavaScript zum Umschalten des Themes hinzufügen

Jetzt fügen wir das JavaScript hinzu, um das Umschalten des Themes zu handhaben. Erstellen Sie eine script.js-Datei mit folgendem Inhalt:

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

// Check for saved user preference
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
    body.classList.add(savedTheme);
}

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

    // Save user preference
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark-mode');
    } else {
        localStorage.removeItem('theme');
    }
});

Nach dem Login kopieren

Dieses Skript wählt die Schaltfläche zum Umschalten des Themas und das Textelement aus. Wenn auf die Schaltfläche geklickt wird, wird die Klasse Dunkelmodus im Körper umgeschaltet. Das Skript speichert außerdem die Designpräferenz des Benutzers in localStorage, sodass das Design auch nach dem erneuten Laden der Seite bestehen bleibt.

Schritt 4: Testen der Implementierung

Starten Sie Ihren Webbrowser und öffnen Sie die Datei index.html, um die Implementierung zu testen. Um zwischen hellen und dunklen Themen zu wechseln, klicken Sie auf die Schaltfläche „Dunkelmodus umschalten“.
Denken Sie daran, dass das Aktualisieren der Seite keinen Einfluss auf die Designpräferenz haben sollte.

Abschluss

Sie können Ihrer Website schnell einen Dunkelmodus-Schalter hinzufügen, indem Sie CSS-Variablen und ein wenig JavaScript verwenden. Diese Methodik erleichtert nahtlose Themenübergänge und bietet ein verbessertes Benutzererlebnis. Sie können Ihrer Seite gerne weitere Elemente hinzufügen und die Stile ändern, um auf dieser Lektion aufzubauen.

Viel Spaß beim Codieren :D

Das obige ist der detaillierte Inhalt vonDer einfachste Weg, den Dunkelmodus zu Ihrer Website hinzuzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!