====== 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** \\ * MDN Favicon: [[https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel#icon|rel="icon"]] * MDN Pseudo-Elemente: [[https://developer.mozilla.org/en-US/docs/Web/CSS/::before|::before]] * MDN classList: [[https://developer.mozilla.org/en-US/docs/Web/API/Element/classList|classList]] * MDN addEventListener: [[https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener|addEventListener]] * MDN Checkbox change event: [[https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event|change event]] ===== Schritt 1 Favicon verlinken ===== {{:de:modul:m291:learningunits:lu03:aufgaben:screenshot_2026-02-23_at_09.29.47.png?nolink&400|Screenshot mit Browsertab und Favicon}} \\ //Screenshot mit Browsertab und Favicon// **Aufgabe** * Ergänzen Sie im ''%%%%'' Ihrer HTML-Datei ein Favicon. * Verwenden Sie dazu ein ''%%%%'' Tag mit ''rel="icon"''. * Achten Sie darauf, dass der Pfad zu Ihrer Datei stimmt (z.B. ''./resources/favicon.ico'').

**Checkliste** * Das Icon erscheint im Browser-Tab (auf Chrome oder Firefox testen, Safari zeigt das Favicon nicht an (weil File lokal gespeichert ist)). * In DevTools → Network gibt es keinen 404 Fehler für das Favicon. ===== Schritt 2 Feature-Icons mit Pseudo-Elementen umsetzen ===== {{:de:modul:m291:learningunits:lu03:aufgaben:screenshot_2026-02-23_at_09.28.00.png?nolink&400|}} \\ 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) {{:de:modul:m291:learningunits:lu03:aufgaben:1_p0ryo3ias6k1zbyv9kusva.png?nolink&400|}} \\ //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:**



  The Div Soup


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 ''%%%%''-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** * Ergänzen Sie bei ''.icon-ok'' sinnvolle Innenabstände links, damit Platz für ein Icon entsteht. * Setzen Sie ''.icon-ok'' auf ''position: relative''. * Nutzen Sie ''.icon-ok::before'', um das Icon einzufügen. * Positionieren Sie das Icon mit ''position: absolute'' links neben dem Text. 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** * Vor beiden Feature-Texten steht ein Icon. * Das Icon überlappt den Text nicht. * Der Abstand wirkt im Desktop und Mobile sauber. ===== Video Switch Dark Light Mode ===== {{:de:modul:m291:learningunits:lu03:aufgaben:m291_lu03_dark-light-switch.mp4?1040x585|Video mit Erklärung zum Dark Light Mode.}} \\ //Video mit Erklärung zum Dark Light Mode und dessen Umsetzung.// ===== Schritt 3 Switch Styling einbauen ===== {{:de:modul:m291:learningunits:lu03:aufgaben:screenshot_2026-02-23_at_09.32.33.png?nolink&300|}} \\ //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** * Ergänzen Sie im HTML im ''%%%%'' zwei %%%% Tags (Slider und Icons). * Fügen Sie den CSS-Block unterhalb Ihrer bestehenden Styles ein, dort wo im Template „Switch Styles" vorgesehen sind. * Kontrollieren Sie die Pfade zu den Icons im ''url(...)''. **HTML**

**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** * Der Switch sieht aus wie ein Schalter (Slider + Kreis + Icons). * Beim Anklicken bewegt sich der Kreis (Animation). * Wenn Icons nicht erscheinen: Pfade in ''url(...)'' prüfen. ===== Schritt 4 Dark Mode Klasse vorbereiten ===== Sie steuern den Dark Mode über eine CSS-Klasse auf dem ''%%%%'' Element. **Aufgabe** * Definieren Sie eine CSS-Klasse ''.theme-dark''. * Schreiben Sie CSS-Regeln, die nur gelten, wenn ''html'' diese Klasse hat. * Es sollen sich ändern: * Hintergrundfarbe * Textfarbe * Navigation-Linkfarben 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 ''%%%%''-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** * Wenn die Klasse ''class="theme-dark"'' im ''%%%%'' steht, wird die Seite dunkel. * Text bleibt gut lesbar. * Navigation bleibt sichtbar. ===== Schritt 5 JavaScript Elemente aus dem DOM abrufen ===== Damit Sie den Switch funktional machen können, brauchen Sie in JavaScript Zugriff auf: * die Checkbox im Switch * das Root-Element ''%%%%'' * das Logo-''%%%%'' **Aufgabe** * Geben Sie dem Logo eine ID, falls noch nicht vorhanden (z.B. ''id="logo"''). * Holen Sie das Logo mit ''getElementById'' und speichern Sie es in einer Variable. * Holen Sie das Root-Element mit ''document.documentElement'' und speichern Sie es in einer Variable (z.B. ''html''). * Rufen Sie die Checkbox ab, entweder mit einer ID oder über einen passenden Selektor, und speichern Sie sie in einer Variable (z.B. ''checkbox''). 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. {{:de:modul:m291:learningunits:lu03:aufgaben:screenshot_2026-02-23_at_09.54.01.png?nolink&600|}} \\ //Folgender Code muss im ''%%