Heim > Artikel > Web-Frontend > So implementieren Sie dunkle/helle Themen in Ihren Web-Apps

So implementieren Sie dunkle/helle Themen in Ihren Web-Apps

王林Original: 2024-07-19 14:22:08902Durchsuche

Haben Sie jemals auf einer Website zwischen dunklen und hellen Themen gewechselt und gedacht: „Ich wünschte, meine Website könnte das tun“? Nun, jetzt ist es möglich. In diesem Artikel zeige ich Ihnen, wie Sie mithilfe von HTML, CSS und JavaScript dunkle und helle Modi in Ihren Webprojekten implementieren und Ihren Benutzern das beste visuelle Erlebnis bieten.

Voraussetzung:Grundkenntnisse von HTML und CSS sind erforderlich, um dieses Tutorial zu verstehen.

Implementierung des Dunkel-/Hell-Themas

Die wichtigsten Komponenten beim Einrichten eines Dunkelmodus/Hellmodus auf Websites sind:

Eine Webseite
Eine Schaltfläche zum Wechseln zwischen den Themen
Das zu wechselnde Thema oder die Farbe
Die Logik hinter dem Wechsel des Themas und des Schaltflächentextes.

Eine Webseite

Richten Sie Ihr Projekt ein

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Virtual Tour App</title>
</head>
<body>
    <div class="hero-sec">
        <div class="col1">
            <h1>Everyday Is a Journey</h1>
            <p>Visit any Location Virtually, Anytime, Anywhere</p>
            <button>Tour</button>
        </div>
        <div class="col2">
            <img src="img.jpg" alt="landscape" width="560px">
        </div>
    </div>
</body>

</html>

Ausgabe einer einfachen Webseite

Web app theming image

Eine Umschalttaste

Es ist wichtig, die Schaltfläche zum Umschalten des Themas hinzuzufügen. Dies ist die Schaltfläche, die den Farbwechsel vom Hellmodus in den Dunkelmodus und umgekehrt auslöst.

    <button id="toggle-button">Dark mode</button>

How to Implement Dark/Light Themes in Your Web Apps

Thema „Hell/Dunkel-Modus“.

Dies ist ein entscheidender Schritt, da es hier um zwei Themen bzw. Farben geht. Wir benötigen eine Möglichkeit, mit wenigen Codezeilen verschiedene Stile an die Webseite anzuhängen. Wir werden CSS-Variablen für die Themengestaltung verwenden. Bitte lesen Sie meinen Artikel über CSS-Variablen, wenn er Ihnen neu vorkommt.

Schritt 1:
Deklarieren Sie den Stil für das Lichtthema

:root{
    --bg: #fafaf3;
    --color: #0A0A0A
}
// This is the light theme; the default theme

Schritt 2:
Deklarieren Sie die Klasse für das dunkle Thema

.dark{
    --bg: #0A0A0A;
    --color: #ffffff;
}
// This is the class that will be added onclick of the button

Hinweis: Die Variablennamen müssen gleich sein.

Dies kann ohne Variablen erfolgen, indem nur das Body-Element verwendet wird. Es ist jedoch besser, CSS-Variablen zu verwenden, da in vielen Fällen mehr als nur die Hintergrundfarbe geändert werden muss. Bei der Gestaltung einiger Web-App-Designs müssen Textfarben, Rahmenfarben, Schatten usw. geändert werden. Die Verwendung einer Variablen ermöglicht also die vollständige Kontrolle über alle Elemente, insbesondere in großen Anwendungen.

Lassen Sie uns das Design unserer Webseite vervollständigen. Stellen Sie sicher, dass Ihr CSS mit der HTML-Datei verknüpft ist.

:root{
    --bg: #fafaf3;
    --color: #0A0A0A
}
// This is the light theme; the default theme
.dark{
    --bg: #0A0A0A;
    --color: #ffffff;
}
body{
    background: var(--bg);
    color: var(--color);
    font-family: monospace
}
.hero-sec{
    display: flex;
    justify-content: space-evenly;
    color: var(--color);
    margin-top: 48px;
}
.col1{
    margin-top: 6rem;
    height: 40%;
}
h1{
    font-size: 2.5rem;
}
p{
    font-size: 1.3rem;
}
button{
    padding: 1rem 2rem;
    background-color: #3f51b5;
    color: #ffffff;
    border: none;
    cursor: pointer;
}
.hero-sec button{
    font-size: 1.3rem;
}

Ausgabe

How to Implement Dark/Light Themes in Your Web Apps

Die Logik hinter dem Themenwechsel

Wenn ein Benutzer auf die Umschalttaste klickt, erwarten wir, dass zwei Dinge passieren.

Das Thema oder der Farbmodus der Website sollte sich ändern.
Der Text auf der Schaltfläche sollte sich ändern.

Um das Thema zu ändern
Manipulieren Sie das DOM (Document Object Model), um die Schaltfläche und den Hauptteil der Webseite zu erhalten.
Deklarieren Sie eine Funktion, um dem Body-Element (das wir bereits im CSS deklariert haben) eine „dunkle“ Klasse hinzuzufügen.
Rufen Sie die Funktion auf, sobald ein Benutzer auf die Schaltfläche für den Dunkel-/Hellmodus klickt. Stellen Sie sicher, dass Ihr JS mit Ihrem HTML verknüpft ist.

const toggleBtn = document.getElementById("toggle-button")
const body = document.body

function toggleTheme() {
    body.classList.toggle("dark")
}
toggleBtn.addEventListener('click', toggleTheme);

Um den Text zu ändern
Fügen Sie der toggleTheme-Funktion einen weiteren Codeblock hinzu. Dieser Code bedeutet einfach, dass Wenn der Text die Klasse „dunkel“ enthält, der Text in den „Hellmodus“ umgeschaltet wird und umgekehrt.

if (body.classList.contains("dark")) {
        toggleBtn.textContent = "Light Mode";
    } else {
        toggleBtn.textContent = "Dark Mode";
    }

Dies kann für saubereren Code in einer Zeile erfolgen.

 toggleBtn.textContent = body.classList.contains("dark")? "Light Mode" : "Dark Mode"

Ja, Sie können jetzt das Thema wechseln. Cool, oder? Sehen Sie sich das beigefügte Video für eine vollständige Demo an.

dark mode website

Abschließend

Indem Sie die in diesem Tutorial beschriebenen Schritte befolgen, können Sie Ihren Benutzern die Flexibilität bieten, ihr bevorzugtes Thema auszuwählen, wodurch Ihre Web-App ansprechender und zugänglicher wird.
Wenn Ihnen mein Artikel gefallen hat, können Sie mir einen Kaffee kaufen, um meine Arbeit zu unterstützen

Lesen Sie meine anderen Artikel über Progressive Web Apps, die innerste Funktionsweise des Webs, CSS-Variablen, einen Leitfaden für Anfänger zur Front-End-Entwicklung und mehr.

Bitte liken, kommentieren und folgen Sie uns für weitere Artikel zu Webentwicklung und Technik. Viel Spaß beim Codieren!!!

Das obige ist der detaillierte Inhalt vonSo implementieren Sie dunkle/helle Themen in Ihren Web-Apps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html Object if switch for require using class JS function dom this border background web app

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verhindern von Supply-Chain-Angriffen in JavaScriptNächster Artikel：Verhindern von Supply-Chain-Angriffen in JavaScript

In Verbindung stehende Artikel

Mehr sehen