LU03: Light Dark Mode Switch mit JavaScript

Ziel von LU03: Sie erweitern Ihre Landingpage um drei Dinge:

  • Favicon verlinken
  • Feature-Icons mit CSS Pseudo-Elementen umsetzen
  • Light Dark Mode Switch stylen und mit JavaScript funktional machen

Wichtig: Ihr Code darf sich von den Beispielen unterscheiden. Entscheidend ist, dass Ihr Ergebnis im Browser korrekt funktioniert und Ihr Code verständlich bleibt.

Voraussetzungen

Ihr Stand nach LU02 ist vorhanden und funktioniert im Desktop und Mobile Layout.

Hilfreiche Links

Schritt 1 Favicon verlinken

Screenshot mit Browsertab und Favicon
Screenshot mit Browsertab und Favicon

Aufgabe 

<!-- Aufgabe: Favicon im head verlinken -->
<!-- Tipp: Prüfen Sie den Pfad im Browser-Netzwerk-Tab (Network) -->
<link rel="icon" href="PFAD_ZUR_DATEI" />

Checkliste

Schritt 2 Feature-Icons mit Pseudo-Elementen umsetzen


Sie haben in Ihrer Info-Zeile zwei Feature-Texte, z.B. „No credit card required„. Vor jedem Text soll ein Icon erscheinen.

Beispiel für das Anwenden von Pseudo-Elementen (nicht so umzusetzen im Projekt Landingpage Alarado, sondern wie oben abgebildet → Feature-Texte mit grünem Haken)
Wenn wir vor oder nach einem Text ein Icon oder Emoji einblenden möchten, eignen sich Pseudo-Elemente sehr gut.

Umsetzung des im Bild oben gezeigten Designs (The Div Soup) mit HTML und CSS: 

<body>
  <h1>The Div Soup</h1>
</body>
body {
  background-color: #000000;
}
 
h1 {
  color: #fff;
}
 
h1::before {
  content: "🚀"; /* Add a rocket icon before the text */
}
 
h1::after {
  content: "🔥"; /* Add a fire icon after the text */
}

Kurze Erklärung: Wir betten die grünen OK-Haken per CSS ein und nicht als <img>-Tag, weil sie keinen eigenen Inhalt transportieren. Sie sind reine Dekoration. So können wir das Icon einmal in einer CSS-Regel definieren und dann auf mehrere Elemente anwenden.

Aufgabe

Bei Pseudo-Elementen können Sie Icons z.B. über content: url(…) einfügen. 

/* Aufgabe: Platz schaffen und Positionierung vorbereiten */
.icon-ok {
  /* z.B. padding-left setzen */
  /* position: relative */
}
 
/* Aufgabe: Icon einfügen und positionieren */
.icon-ok::before {
  /* content: url("PFAD_ZUM_ICON") */
  /* position: absolute */
  /* left: 0; top: ... */
}

Checkliste

Video Switch Dark Light Mode


Video mit Erklärung zum Dark Light Mode und dessen Umsetzung.

Schritt 3 Switch Styling einbauen


Aus der Checkbox wird ein Switch. Nutzen Sie dazu den vorgegebenen Code unten.

Jetzt stylen Sie die Checkbox als Switch. Den folgenden Code dürfen Sie 1 zu 1 übernehmen.

Aufgabe

HTML 

<label class="switch">
  <input type="checkbox" />
  <span class="slider"></span> <!-- Platzhalter für den Schieber -->
  <span class="switch-icons"></span> <!-- Platzhalter für die Icons -->
</label>

CSS 

/* Following: Styles Checkbox as Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  cursor: pointer;
}
 
/* Hide the checkbox input */
.switch input {
  display: none;
}
 
/* Describe slider's look and position. */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--main-text-color-light);
  transition: 0.4s;
  border-radius: 20px;
}
 
/* Describe the white ball's location and appearance in the slider. */
.slider:before {
  position: absolute;
  content: '';
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background: var(--main-text-color-dark);
  transition: 0.4s;
  border-radius: 50%;
}
 
/* When the checkbox is checked, shift the white ball towards the right within the slider. */
input:checked + .slider:before {
  transform: translateX(24px);
}
 
.switch-icons {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    4px / 16px no-repeat url('./resources/Moon_fill.svg'),
    28px / 16px no-repeat url('./resources/Sun_fill.svg');
}
 
/* Modify the icons once the checkbox has been selected. */
input:checked ~ .switch-icons {
  background:
    4px / 16px no-repeat url('./resources/Moon_fill_light.svg'),
    28px / 16px no-repeat url('./resources/Sun_fill_light.svg');
}

Checkliste

Schritt 4 Dark Mode Klasse vorbereiten

Sie steuern den Dark Mode über eine CSS-Klasse auf dem <html> Element.

Aufgabe

Schreiben Sie die Regeln so, dass Sie nicht überall neue Farben kopieren, sondern Ihre Variablen verwenden.
Setzen Sie zum Testen provisorisch die Klasse theme-dark aufs <html>-Element. Entfernen Sie dies wieder, sobald Sie mit der Gestaltung fertig sind: Die Klasse wird danach dynamisch mit JavaScript gesetzt. 

/* Aufgabe: Klasse definieren */
.theme-dark {
  /* optional: color-scheme: dark; */
}
 
/* Aufgabe: Wenn html theme-dark hat, Farben umstellen */
html.theme-dark body {
  /* background-color: var(--...-dark); */
  /* color: var(--...-dark); */
}
 
/* Aufgabe: Navigation Links im Dark Mode lesbar machen */
html.theme-dark .menu li a:not(.active) {
  /* color: var(--...-dark); */
}

Checkliste

Schritt 5 JavaScript Elemente aus dem DOM abrufen

Damit Sie den Switch funktional machen können, brauchen Sie in JavaScript Zugriff auf:

Aufgabe

Best Practice: Geben Sie der Checkbox eine ID, z.B. id=„theme-toggle“. Dann ist Ihr Code stabiler, wenn später weitere Inputs auf der Seite dazu kommen.


Folgender Code muss im <script>-Tag programmiert werden. 

// Aufgabe: DOM-Elemente abrufen und in Variablen speichern
// const checkbox = ... (Switch)
// const html = ... (Root-Element)
// const logo = ... (img)

Schritt 6 Funktion zum Umschalten schreiben

Jetzt schreiben Sie eine Funktion, die beim Umschalten drei Dinge erledigt:

Nutzen Sie für das Setzen der Klasse auf dem <html>-Element die Methoden classList.add und classList.remove. 

// Aufgabe: Funktion toggleTheme()
// - wenn checkbox aktiv: theme-dark setzen oder entfernen (je nach Logik)
// - Logo wechseln: logo.src auf light oder dark setzen
 
function toggleTheme() {
  if (checkbox.checked) {
    // Klasse theme-dark setzen oder entfernen (je nach Logik)
    // Logo auf passende Datei setzen (Pfad anpassen)
  } else {
    // Klasse theme-dark setzen oder entfernen (je nach Logik)
    // Logo auf passende Datei setzen (Pfad anpassen)
  }
}

Checkliste

Schritt 7 Event Listener für den Switch

Aufgabe 

// Aufgabe: checkbox.addEventListener("change", ...)
// In der Callback-Funktion: toggleTheme() aufrufen
 
checkbox.addEventListener('change', () => {
  // Callback-Funktion: wird aufgerufen, sobald sich der Status der Checkbox ändert
  // Rufen Sie hier toggleTheme() auf
});

Schritt 8 Initialzustand beim Laden prüfen

Wenn die Seite neu lädt, soll der Zustand korrekt sein:

Aufgabe 

// Aufgabe: Initialzustand setzen
// - toggleTheme() beim Laden einmal ausführen

Schritt 9 Testen und Debugging

Testfälle

Debugging Tipps

Wenn etwas nicht geht, geben Sie testweise Ausgaben in die Console aus, z.B. ob checkbox.checked true oder false ist.

1)
click funktioniert auch, change ist aber semantisch passender für Form-Inputs.
2)
Wenn eine Variable null ist, stimmt meist der Selektor oder die ID nicht.