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.
На этой странице сайта вы можете посмотреть видео онлайн Dark Mode Button mit JavaScript programmieren (ganz einfach) | CSS + JS Tutorial Deutsch длительностью часов минут секунд в хорошем качестве, которое загрузил пользователь Coding - kurz und knapp 11 Апрель 2022, поделитесь ссылкой с друзьями и знакомыми, на youtube это видео уже посмотрели 6,739 раз и оно понравилось 259 зрителям. Приятного просмотра!
