Der Dunkelmodus ist zu einer beliebten Präferenz geworden, daher sollten Sie darauf achten, ihn auf Ihren Websites und in Ihren Web-Apps zu unterstützen.

In den letzten Jahren hat der Dunkelmodus als Benutzeroberflächenoption erheblich an Popularität gewonnen. Es bietet einen dunkleren Hintergrund, ergänzt durch helleren Text, was nicht nur die Belastung der Augen verringert, sondern auch die Akkulaufzeit verlängert, insbesondere bei OLED-Bildschirmen.

Entdecken Sie, wie Sie mithilfe einer Kombination aus CSS und JavaScript eine Dark-Mode-Option zu Ihren Websites und Web-Apps hinzufügen können.

Den Dunkelmodus verstehen

Der Dunkelmodus ist ein alternatives Farbschema für Ihre Website, die den traditionellen hellen Hintergrund durch einen dunklen ersetzt. Dadurch werden Ihre Seiten angenehmer für die Augen, insbesondere bei schlechten Lichtverhältnissen. Aufgrund seiner Benutzerfreundlichkeit ist der Dunkelmodus auf vielen Websites und Anwendungen zu einer Standardfunktion geworden.

Einrichten Ihres Projekts

instagram viewer

Bevor Sie dies umsetzen, stellen Sie sicher, dass Sie ein Projekt eingerichtet haben, an dem Sie arbeiten können. Sie sollten Ihre HTML-, CSS- und JavaScript-Dateien strukturiert organisieren.

Der HTML-Code

Beginnen Sie mit dem folgenden Markup für den Inhalt Ihrer Seite. Ein Besucher kann das nutzen theme__switcher Element zum Umschalten zwischen Dunkel- und Hellmodus.

<body>
<navclass="navbar">
<spanclass="logo">Company Logospan>
<ulclass="nav__lists">
<li>Aboutli>
<li>Blogli>
<li>Contactli>
ul>


<divid="theme__switcher">
<imgid="theme__image"src="./toggle.svg"alt="" />
div>
nav>


<main>
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Odit deserunt sit neque in labore quis quisquam expedita minus
 perferendis.
main>
<scriptsrc="./script.js">script>
body>

Der CSS-Code

Fügen Sie das folgende CSS hinzu, um das Beispiel zu formatieren. Dies fungiert als Standard-Hellmodus, den Sie später um neue Stile für eine Dunkelmodus-Ansicht erweitern.

@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@400;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html { font-size: 62.5%; }


body { font-family: "Quicksand", sans-serif; }


.navbar {
display: flex;
padding: 2rem;
font-size: 1.6rem;
align-items: center;
color: rgb(176, 58, 46);
background-color: #fdedec;
}


.navbarspan { margin-right: auto; }


.logo { font-weight: 700; }


.nav__lists {
display: flex;
list-style: none;
column-gap: 2rem;
margin: 0 2rem;
}


#theme__switcher { cursor: pointer; }


main {
width: 300px;
margin: 5remauto;
font-size: 2rem;
line-height: 2;
padding: 1rem 2rem;
border-radius: 10px;
box-shadow: 2px 3.5px 5pxrgba(242, 215, 213, 0.4);
}

Im Moment sollte Ihre Oberfläche so aussehen:

Implementieren des Dunkelmodus mit CSS und JavaScript

Um den Dunkelmodus zu implementieren, definieren Sie dessen Aussehen mithilfe von CSS. Anschließend verwenden Sie JavaScript, um den Wechsel zwischen Dunkel- und Hellmodus zu verwalten.

Erstellen der Themenklassen

Verwenden Sie für jedes Thema eine Klasse, damit Sie problemlos zwischen den beiden Modi wechseln können. Für ein umfassenderes Projekt sollten Sie überlegen, wie Der Dunkelmodus kann sich auf jeden Aspekt Ihres Designs auswirken.

.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}

Auswahl der interaktiven Elemente

Fügen Sie das folgende JavaScript zu Ihrem hinzu script.js Datei. Das erste Codebit wählt einfach die Elemente aus, die Sie für die Umschaltung verwenden.

// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;

Hinzufügen der Umschaltfunktion

Verwenden Sie als Nächstes das folgende JavaScript, um zwischen dem Lichtmodus (Licht) und Dunkelmodus (dunkel) Klassen. Beachten Sie, dass es auch eine gute Idee ist, den Kippschalter zu ändern, um den aktuellen Modus anzuzeigen. Dieser Code tut dies mit ein CSS-Filter.

// Function to set the theme
functionsetTheme(theme) {
// If the theme is "dark," add the "dark" class, remove "light" class,
// and adjust filter style
 bodyEl.classList.toggle("dark", theme "dark");


// If the theme is "light," add the "light" class, remove "dark" class,
 bodyEl.classList.toggle("light", theme !== "dark");


// adjust filter of the toggle switch
 themeToggle.style.filter = theme "dark"? "invert(75%)": "none";
}


// Function to toggle the theme between light and dark


functiontoggleTheme() {
 setTheme(bodyEl.classList.contains("dark")? "light": "dark");
}


themeToggle.addEventListener("click", toggleTheme);

Dadurch ändert sich das Thema Ihrer Seite mit einem Klick auf den Umschaltcontainer.

Verbessern des Dunkelmodus mit JavaScript

Erwägen Sie die folgenden zwei Verbesserungen, die die Nutzung Ihrer Dark-Mode-Websites für Ihre Besucher angenehmer machen können.

Benutzerpräferenzen erkennen

Dazu müssen Sie das Systemthema des Benutzers überprüfen, bevor die Website geladen wird, und Ihre Website entsprechend anpassen. Hier erfahren Sie, wie Sie dies mit dem tun können matchMedia Funktion:

// Function to detect user's preferred theme
functiondetectPreferredTheme() {
// Check if the user prefers a dark color scheme using media queries
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
 setTheme(prefersDarkMode);
}


// Run the function to detect the user's preferred theme
detectPreferredTheme();

Jetzt sieht jeder Benutzer, der Ihre Website besucht, ein Design, das zum aktuellen Thema seines Geräts passt.

Bestehende Benutzereinstellungen mit lokalem Speicher

Um das Benutzererlebnis weiter zu verbessern, Verwenden Sie lokalen Speicher um sich den vom Benutzer gewählten Modus sitzungsübergreifend zu merken. Dadurch wird sichergestellt, dass sie ihren bevorzugten Modus nicht wiederholt auswählen müssen.

functionsetTheme(theme) {
 bodyEl.classList.toggle("dark", theme "dark");
 bodyEl.classList.toggle("light", theme !== "dark");
 themeToggle.style.filter = theme "dark"? "invert(75%)": "none";


// Setting the theme in local storage
 localStorage.setItem("theme", theme);
}


// Check if the theme is stored in local storage


const storedTheme = localStorage.getItem("theme");


if (storedTheme) {
 setTheme(storedTheme);
}


functiondetectPreferredTheme() {
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;


// Getting the value from local storage
const storedTheme = localStorage.getItem("theme");
 setTheme(prefersDarkMode && storedTheme !== "light"? "dark": "light");
}

Wir setzen auf benutzerzentriertes Design

Der Dunkelmodus geht über das Aussehen hinaus; Es geht darum, den Benutzerkomfort und die Vorlieben in den Vordergrund zu stellen. Wenn Sie diesem Ansatz folgen, können Sie benutzerfreundliche Oberflächen erstellen und zu wiederholten Besuchen anregen. Achten Sie beim Codieren und Entwerfen auf das Wohlbefinden der Benutzer und bieten Sie Ihren Lesern ein besseres digitales Erlebnis.