Dark Mode Button mit JavaScript programmieren (ganz einfach) | CSS + JS Tutorial Deutsch
Hol dir bei Hostinger das beste Webhosting, um deine Webseite online zu stellen: https://www.hostinger.de/kurzundknapp
Mit dem Coupon-Code: KURZUNDKNAPP
sparst du 10% Rabatt auf alle Webhosting-Pakete mit einer Laufzeit von 12 Monaten und mehr.
In diesem Video lernst du kurz und knapp, wie du einen Darkmode für deine Webseite programmierst. Grundkenntnisse in HTML, CSS und JavaScript reichen aus, um den Inhalten dieses Tutorials folgen zu können.
In diesem Tutorial werden CSS Variablen verwendet. Wenn du mehr darüber wissen möchtest kannst du dir dieses Video anschauen:
• CSS Variablen Tutorial Deutsch
Vorgehensweise:
Um einen Darkmode für deine Webseite ein und ausschalten zu können, musst du zunächst in CSS festlegen, wie dein Darkmode aussehen soll. Das machst du mit CSS Variablen. Alle Farben deiner Webseite solltest du in Variablen speichern und an den jeweiligen Stellen mit der var() Funktion auf die Variable verweisen. Jetzt erstellst du eine Klasse .dark_mode wo du für jede Webseitenfarbe eine Variante im Darkmode als Variable speicherst.
In JavaScript kannst du über einen EventListener für den dark_mode_button folgende Zeile ausführen:
document.body.classList.toggle("dark_mode")
Die Toggle-Funktion wird den Darkmode per Button-Klick ein- und ausschalten.
Nesta página do site você pode assistir ao vídeo on-line Dark Mode Button mit JavaScript programmieren (ganz einfach) | CSS + JS Tutorial Deutsch duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário Coding - kurz und knapp 11 Abril 2022, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 6,739 vezes e gostou 259 espectadores. Boa visualização!
