In diesem Webdesign-Tutorial zeige ich, wie man mit Bootstrap 5.3 einen Dark Mode bzw. ein Dark Theme sowie einen Color-Modus-Wechsler realisieren kann.

Im ersten Schritt geht es um das grundlegende Einstellen eines Farbschemas (Light, Dark oder Auto Mode zur Nutzung des Systemstandards) für die gesamte Website (data-Attribut bei html-Tag hinterlegen). Dies könnte man analog zu den Bootstrap-Docs (siehe https://getbootstrap.com/docs/5.3/cus...) auch für einzelne Elemente hinterlegen. Für den Einsatz von Farben auf jeden Fall auch die überarbeiteten Infos zu Color auschecken (https://getbootstrap.com/docs/5.3/cus....

Danach zeige ich noch, wie man mittels des von Bootstrap vorgegebenen JavaScript-Codes sowie des Quellcodes der Bootstrap-Website einen Color Mode Switcher umsetzen kann. Neben dem Script ist natürlich das HTML-Gerüst wichtig. Bei Bedarf können SVGs übernommen werden. Abschließend stylen wir den Toggler noch, damit es wie eine Art Button Group aussieht.

Das Video ist relativ spontan entstanden. Ich hoffe, ich kann damit dem ein oder anderen weiterhelfen. Da Bootstrap 5.3 im Moment der Aufnahme erst eine Woche alt ist, dürfte es hier noch wenig Hilfe online geben und auch die Bootstrap Docs sind noch ausbaufähig. Eine Live-Beispiel für den Einsatz der neuen Bootstrap-Farben und -Farbmodus ist meine neue Website: https://www.dominikboessl.de/

Timestamps / Kapitel:
0:00 Intro
0:35 Farbmodus aktivieren
1:47 Switch für Farbmodus integrieren
3:21 Farbwechsler ausgestalten
8:27 Bisschen Code-Pflege
9:19 Outro

In diesem Video zum #Bootstrap #Darkmode spreche ich Deutsch. I speak german in this #Tutorial.