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.
En esta página del sitio puede ver el video en línea Dark Mode Button mit JavaScript programmieren (ganz einfach) | CSS + JS Tutorial Deutsch de Duración hora minuto segunda en buena calidad , que subió el usuario Coding - kurz und knapp 11 abril 2022, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 6,739 veces y le gustó 259 a los espectadores. Disfruta viendo!
