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.
In questa pagina del sito puoi guardare il video online Dark Mode Button mit JavaScript programmieren (ganz einfach) | CSS + JS Tutorial Deutsch della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Coding - kurz und knapp 11 aprile 2022, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 6,739 volte e gli è piaciuto 259 spettatori. Buona visione!
