Dark Mode Button mit JavaScript programmieren (ganz einfach) | CSS + JS Tutorial Deutsch

Published: 11 April 2022
on channel: Coding - kurz und knapp

6,739

259

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.

On this page of the site you can watch the video online Dark Mode Button mit JavaScript programmieren (ganz einfach) | CSS + JS Tutorial Deutsch with a duration of hours minute second in good quality, which was uploaded by the user Coding - kurz und knapp 11 April 2022, share the link with friends and acquaintances, this video has already been watched 6,739 times on youtube and it was liked by 259 viewers. Enjoy your viewing!

324