Bootstrap 5.3 Dark Mode Tutorial – Neue Color Modes einsetzen und Toggler realisieren (mit Beispiel)
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 getbootstrap.com/docs/5.3/customize/color-modes/) auch für einzelne Elemente hinterlegen. Für den Einsatz von Farben auf jeden Fall auch die überarbeiteten Infos zu Color auschecken (getbootstrap.com/docs/5.3/customize/color/).
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: 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 spreche ich Deutsch. I speak german in this tutorial.
* Dies ist ein Affiliate-Link, der mit dem Partnerprogramm von Amazon zusammenhängt. Sobald du darauf geklickt hast, wird bei dir am Rechner für 24 Stunden ein Cookie gespeichert. Wenn du in diesem Zeitraum etwas bei Amazon kaufst, dann bekomme ich dafür eine kleine Provision (zwischen einem und zehn Prozent des Warenkorb-Wertes). Auf dich oder deinen Einkauf hat dies keine Auswirkungen. Vielen Dank für deine Unterstützung! 😊