Veröffentlicht in Web.

Darkmode - Switch ON/OFF

Angelina Miteva | .

Ein Darkmode-Umschalter ist mittlerweile Standard auf modernen Webseiten. Dieses Tutorial stellt ein einfaches Grundgerüst vor und zeigt Möglichkeiten zur Erweiterung.

Grundgerüst

Das Grundgerüst umfasst den strukturellen Aufbau des Darkmode-Schalters sowie die dazugehörige Animation. Die folgende Vorschau demonstriert das gewünschte Ergebnis.

Teil 1 - Der HTML-Code

Zu Beginn wird der HTML-Code erstellt. Dieser besteht aus zwei Hauptabschnitten:

1) Die allgemeine Struktur der HTML-Datei:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Day/Night Toggle</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

2) Der Code für den Schalter selbst:

<label class="umschalter">
    <input type="checkbox" id="nachtmodus" onclick="document.body.classList.toggle('nacht');">
    <span class="schieber"></span>
  </label>
</body>
</html>

  • <label class="umschalter"> Ein Container-Element, das den Schalter umgibt und gestylt wird.

  • <input type="checkbox" id="nachtmodus" onclick="document.body.classList.toggle('nacht');"> Ein Checkbox-Input, der als Schalter fungiert. Beim Klicken wird die Funktion ausgeführt, die der <body>-Klasse die Klasse nacht hinzufügt oder entfernt - so wird der Darkmode ein- bzw. ausgeschaltet.

  • <span class="schieber"></span> Ein span-Element, das das visuelle Element des Schiebereglers darstellt, der sich hin- und herbewegt, um den Wechsel des Darkmodes zu simulieren.

Zusätzlich wird dem Button im HTML ein onclick-Attribut mit einer JavaScript-Funktion hinzugefügt, um beim Klick den Dark-Mode ein- oder auszuschalten.

Achtung: Der JavaScript-Code wird hier direkt in die HTML-Datei eingebunden, da es sich um ein kleines Projekt handelt. Bei größeren Projekten sollte er in eine separate Datei ausgelagert werden.

Teil 2 - Der CSS-Code

body {
  display: flex; 
  justify-content: center; 
  align-items: center;
  height: 100vh;
  background-color: white; 
  margin: 0;
}

  • display: flex; Aktiviert Flexbox, um den Inhalt flexibel anzuordnen

  • justify-content: center; Zentriert den Inhalt horizontal

  • align-items: center; Zentriert den Inhalt vertikal

  • margin: 0; Entfernt den Standardabstand um den Body

Der gesamte Block sorgt dafür, dass der Inhalt im Browserfenster sowohl horizontal als auch vertikal zentriert wird, der Hintergrund weiß erscheint und der Standardabstand entfällt. Mit height: 100vh; wird sichergestellt, dass der Body immer die volle Bildschirmhöhe einnimmt.

.umschalter {
  width: 89px; 
  height: 40px; 
  background-color: black; 
  border-radius: 30px; 
  position: relative; 
}

Dieser Block stylt den Umschalter und gibt ihm eine feste Größe und einen abgerundeten Rand. Durch position: relative wird es möglich, die Position des Schiebers innerhalb des Umschalters zu steuern.

.schieber {
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 5px; 
  left: 5px; 
  transition: left 0.7s ease; 
}

  • top: 5px; und left: 5px; Positionieren den Schieber 5 Pixel vom oberen bzw. linken Rand des Umschalters.

  • transition: left 0.7s ease; Ermöglicht eine sanfte Bewegung des Schiebers mit einem ease-Effekt.

Dieser Block definiert das Aussehen und die Animation des Schiebers, der sich innerhalb des Umschalters bewegt.

.umschalter input {
  display: none; 
}

  • display: none; Versteckt die Checkbox

Die Regel sorgt dafür, dass das tatsächliche <input>-Element (die Checkbox) nicht sichtbar ist. Es dient nur als interaktive Fläche.

.umschalter input:checked + .schieber {
  left: 54px; 
}

Diese Regel bewirkt, dass der Schieber nach rechts verschoben wird, wenn die Checkbox aktiviert ist. Dabei kommt der :checked-Klassen-Selektor zum Einsatz, um den Zustand der Checkbox zu prüfen und den Schieber entsprechend zu animieren.

body.nacht {
  background-color: black; 
}

Diese CSS-Regel ändert den Hintergrund der Seite zu schwarz, wenn dem <body> die Klasse nacht hinzugefügt wird (also beim Aktivieren des Darkmode).

body.nacht .umschalter {
  background-color: white; 
}

Hier wird der Hintergrund des Umschalters mit background-color im Nachtmodus auf weiß gesetzt.

body.nacht .schieber {
  background-color: black; 
}

Diese Regel sorgt dafür, dass der Schieber im Nachtmodus schwarz erscheint.

Vollständiger Code (Endversion)

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Day/Night Toggle</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <label class="umschalter">
    <input type="checkbox" id="nachtmodus" onclick="document.body.classList.toggle('nacht');">
    <span class="schieber"></span>
  </label>
</body>
</html>

CSS:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: white; 
  margin: 0;
}
.umschalter {
  width: 89px;
  height: 40px;
  background-color: black;
  border-radius: 30px;
  position: relative;
}
.schieber {
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 5px;
  transition: left 0.7s ease;
}
.umschalter input {
  display: none;
}
.umschalter input:checked + .schieber {
  left: 54px; 
}
body.nacht {
  background-color: black; 
}
body.nacht .umschalter {
  background-color: white; 
}
body.nacht .schieber {
  background-color: black; 
}

Teil 3 - Mögliche Erweiterungen

Nachdem das Grundgerüst nun steht, können Design und Animation nach Belieben erweitert werden. Im Folgenden werden einige Erweiterungsmöglichkeiten vorgestellt:

Icons

Durch die Integration von Icons lässt sich der Schalter visuell ansprechender gestalten. Im folgenden Beispiel werden zwei SVG-Icons (ein Mond und eine Sonne) verwendet, die je nach Zustand des Nachtmodus angezeigt werden:

<span class="schieber">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mond-icon">
    <path fill-rule="evenodd" d="M7.455 2.004a.75.75 0 0 1 .26.77 7 7 0 0 0 9.958 7.967.75.75 0 0 1 1.067.853A8.5 8.5 0 1 1 6.647 1.921a.75.75 0 0 1 .808.083Z" clip-rule="evenodd" />
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="sonne-icon">
    <path d="M10 2a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 2ZM10 15a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 15ZM10 7a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM15.657 5.404a.75.75 0 1 0-1.06-1.06l-1.061 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06ZM6.464 14.596a.75.75 0 1 0-1.06-1.06l-1.06 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06ZM18 10a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 18 10ZM5 10a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 5 10ZM14.596 15.657a.75.75 0 0 0 1.06-1.06l-1.06-1.061a.75.75 0 1 0-1.06 1.06l1.06 1.06ZM5.404 6.464a.75.75 0 0 0 1.06-1.06l-1.06-1.06a.75.75 0 1 0-1.061 1.06l1.06 1.06Z" />
  </svg>
</span>

Diese Icons werden in der Klasse schieber eingebaut und wechseln je nach dem Zustand des Darkmodes.

Im dazugehörigen CSS werden die Icons zunächst versteckt:

.mond-icon, .sonne-icon {
  width: 20px;
  height: 20px;
  color: white;
  position: absolute;
  top: 5px;
  left: 5px;
  display: none;
}

Dann wird geregelt, welches Icon wann angezeigt wird:

body.nacht .mond-icon {
  display: block;
}
body:not(.nacht) .sonne-icon {
  display: block;
}

  • Das Mond-Icon erscheint nur, wenn das <body> die Klasse nacht besitzt.

  • Das Sonnen-Icon wird nur angezeigt, wenn der Nachtmodus nicht aktiv ist.

Styling

Eine einfache, aber effektive Erweiterung ist die weitere Gestaltung des Schalter-Farbschemas. So kann der Schalter durch zusätzliche Farbanpassungen und Schatteneffekte optisch verbessert werden:

body.nacht .umschalter {
  background-color: #0F2340;
}

Hier wird zunächst die farbe des schalters mit einer farbe im HEX format geändert.

body.nacht .umschalter {
  box-shadow: 0 0px 8px white;
}

Anschließend wurde dann noch ein weißer schatten mit box-shadow hinzugefügt.

Vollständiger Code mit Erweiterungen (Endversion)

HTML:

<!DOCTYPE html> 
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Day/Night Toggle</title>
  <link rel="stylesheet" href="style.css"> 
</head>
<body>
  <label class="umschalter">
    <input type="checkbox" id="nachtmodus" onclick="document.body.classList.toggle('nacht');"> 
    <span class="schieber">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mond-icon"> <!-- Mond-SVG für Nachtmodus -->
        <path fill-rule="evenodd" d="M7.455 2.004a.75.75 0 0 1 .26.77 7 7 0 0 0 9.958 7.967.75.75 0 0 1 1.067.853A8.5 8.5 0 1 1 6.647 1.921a.75.75 0 0 1 .808.083Z" clip-rule="evenodd" />
      </svg>
      <!-- Sonne-Icon, das angezeigt wird, wenn der Nachtmodus deaktiviert ist -->
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="sonne-icon"> <!-- Sonne-SVG für Tagmodus -->
        <path d="M10 2a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 2ZM10 15a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 15ZM10 7a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM15.657 5.404a.75.75 0 1 0-1.06-1.06l-1.061 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06ZM6.464 14.596a.75.75 0 1 0-1.06-1.06l-1.06 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06ZM18 10a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 18 10ZM5 10a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 5 10ZM14.596 15.657a.75.75 0 0 0 1.06-1.06l-1.06-1.061a.75.75 0 1 0-1.06 1.06l1.06 1.06ZM5.404 6.464a.75.75 0 0 0 1.06-1.06l-1.06-1.06a.75.75 0 1 0-1.061 1.06l1.06 1.06Z" />
      </svg>
    </span>
  </label>
</body>
</html>

CSS:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}
.umschalter {
  width: 89px;
  height: 40px;
  background-color: #FCFBED;
  border-radius: 30px;
  position: relative;
  box-shadow: 0 0px 7px grey; 
}
body.nacht .umschalter {
  background-color: #0F2340;
  box-shadow: 0 0px 8px white;
}
.schieber {
  width: 30px;
  height: 30px;
  background-color: #FCCC54;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 5px;
  transition: left 1.5s ease;
  box-shadow: 0 2px 6px grey;
}
.umschalter input {
  display: none;
}
.umschalter input:checked + .schieber {
  left: 54px;
  background-color: #AAD5FC;
}
body.nacht {
  background-color: black; 
}
.mond-icon, .sonne-icon {
  width: 20px;
  height: 20px;
  color: white;
  position: absolute;
  top: 5px;
  left: 5px;
  display: none;
}
body.nacht .mond-icon {
  display: block;
}
body:not(.nacht) .sonne-icon {
  display: block;
}

So sieht das Endergebnis schließlich aus:

Fazit

Dieses Tutorial zeigt die grundlegende Umsetzung eines Darkmode-Umschalters mit HTML, CSS und JavaScript. Zur Weiterentwicklung bieten sich folgende Erweiterungen an:

  • Hinzufügen von CSS-Übergängen für weichere Wechsel

  • Verwendung von Icons und Bildern bzw. Grafiken zur besseren visuellen gestaltung

Das gezeigte Beispiel bietet eine solide Grundlage für eigene Experimente und kann leicht an individuelle Projekte angepasst werden.

Quellen

Icons

https://heroicons.com/

Hilfreiche Webseiten

Dark Mode in CSS | CSS-Tricks

How To Toggle Between Dark and Light Mode

(365) LIGHT/DARK THEME TOGGLE (HTML, CSS and JavaScript) Easily - YouTube

Link auf CodePen.io

https://codepen.io/darkmode/pen/RNNyyVa

https://codepen.io/darkmode/pen/XJJqzVV

Codes zum Herunterladen
darkmode-grundgeruest.zip
darkmode-erweitert.zip

Auch interessant

    © 0t1

    Cookies

    0t1 mag keine Kekse (und kein Tracking). Wir verwenden lediglich notwendige Cookies für essentielle Funktionen.

    Wir verwenden Schriftarten von Adobe Fonts. Dafür stellt dein Browser eine Verbindung zu den Servern von Adobe in den USA her. Wenn du unsere Seite nutzen möchtest, musst du dich damit einverstanden erklären.

    Weitere Informationen in unserer Datenschutzerklärung.