Hinzufügen des dunklen Modus zu ASP.NET Core in nur EINER Zeile Code!

Einführung in den Dark Mode in ASP.NET Core

Zu Beginn des Tutorials geht Tim auf eine häufige Anforderung in modernen Webanwendungen ein - die Aktivierung des Dark Mode in ASP.NET Core. Unabhängig davon, ob Sie Blazor, MVC oder Razor Pages verwenden, führt Bootstrap 5.3 die Unterstützung für dunkle Themen auf sehr einfache Weise ein.

Wie Tim erklärt, kann diese Dark-Mode-Funktion mit einer einzigen Codezeile aktiviert werden - und ist damit eine schnelle und effektive Lösung für Entwickler, die die Benutzeroberfläche ihrer Website verbessern wollen. Die neue Unterstützung für den dunklen Modus ist besonders nützlich für Benutzer, die je nach ihren Systemeinstellungen oder persönlichen Vorlieben ein helles Thema oder eine dunkle Oberfläche bevorzugen.

Überprüfung der Bootstrap-Version in einer Blazor-Webanwendung

Tim verwendet Visual Studio, um ein Blazor-Webanwendungsprojekt durchzugehen. Er navigiert zum Ordner wwwroot und öffnet die Datei bootstrap.min.css, um zu bestätigen, dass die App Bootstrap Version 5.3.3 verwendet. Bei 1:01 stellt er fest, dass Version 5.3 oder höher erforderlich ist, um den Dark Mode zu unterstützen.

Wenn Ihr Projekt bereits diese oder eine neuere Version verwendet, müssen Sie Bootstrap nicht aktualisieren oder zusätzliche Tools hinzufügen. Dies ist ein entscheidender Schritt, da ältere Versionen von Bootstrap keinen Wechsel des Themes mit dem Attribut data-bs-theme unterstützen.

Eine Zeile Code zum Aktivieren des dunklen Themas

An dieser Stelle öffnet Tim die Datei App.razor. Er hebt den -Tag hervor und demonstriert, wie man mit einem HTML-Attribut ein dunkles Thema auf die gesamte App anwendet:

data-bs-theme="dunkel"

Dieser einfache Zusatz weist Bootstrap an, das dunkle Farbschema auf alle Seiten und Elemente anzuwenden. Tim führt die Anwendung vor und nach dem Hinzufügen der Zeile aus, um den Kontrast zu verdeutlichen. Bei 2:03 schaltet er den dunklen Modus ein und bestätigt, dass das Thema sofort aktualisiert wird.

Anpassung für benutzerdefiniertes CSS im dunklen Modus

Tim weist darauf hin, dass dieser Einzeiler zwar die allgemeine Hintergrundfarbe und das Thema ändert, dass aber bestehende CSS-Dateien weiterhin mit dem dunklen Thema in Konflikt geraten könnten. So werden beispielsweise weiße Schrift, Schriftgrößen oder Hintergründe, die in Ihren CSS-Dateien fest einkodiert sind, nicht automatisch angepasst.

Wie Tim bei 2:34 anmerkt, müssen Sie umso mehr benutzerdefinierte Stile bearbeiten und testen, je mehr Sie geschrieben haben. Aus diesem Grund empfiehlt er, zu Beginn der Entwicklung mit dem dunklen Modus zu beginnen, wenn weniger Elemente angepasst werden müssen.

Wechsel zwischen hellen und dunklen Themes

Bei 2:50 hebt Tim hervor, dass man auch zwischen dunklen und hellen Themes umschalten kann. Wenn Sie das Attribut in data-bs-theme="hell" ändern, aktivieren Sie wieder das Light-Thema:

data-bs-theme="hell"

Tim schlägt vor, dass die Entwickler den Benutzern die Möglichkeit geben könnten, ihr bevorzugtes Thema zu wählen - zum Beispiel durch Hinzufügen eines Umschalters mit JavaScript oder serverseitiger Logik.

Die Möglichkeit, zwischen dunklen und hellen Designs zu wechseln, wird von den Nutzern zunehmend erwartet, insbesondere bei Windows-Anwendungen oder mobilen Geräten, bei denen das bevorzugte Farbschema automatisch erkannt wird.

Behebung von Layout-Konflikten in ASP.NET Core

Eine der häufigsten Herausforderungen, erklärt Tim, sind uneinheitliche Stile für bestimmte Elemente - wie die obere Navigationsleiste. Bei 3:12 zeigt er, wie eine layoutspezifische CSS-Datei (MainLayout.razor.css) die Standardeigenschaften von Bootstrap außer Kraft setzt.

Er findet einen .top-row-Selektor, der direkt eine Farbe setzt, die nicht auf die Theme-Einstellung reagiert. Seine Lösung: Entfernen Sie die Farbeigenschaft, damit Bootstrap den Stil basierend auf dem aktuellen Thema verwalten kann (3:47).

Nach dem Entfernen des Override sieht das dunkle Theme sauberer aus. Und wenn er zurück zum hellen Thema wechselt, funktioniert es immer noch - was zeigt, dass Bootstrap die Farbwerte dynamisch auf der Grundlage des gewählten Themas anwendet.

Verwendung themenspezifischer CSS-Regeln

Bei 4:17 gibt Tim einen weiteren hilfreichen Tipp: Entwickler können die Themenerkennung in ihrem CSS verwenden, um je nach aktivem Modus unterschiedliche Stile anzuwenden. So können Sie auf den data-bs-Themenwert reagieren und Ihre Anwendung entsprechend gestalten.

Sie können beispielsweise die Schriftgröße, die Textfarbe oder sogar die Bilder anpassen, je nachdem, ob der Benutzer den dunklen oder hellen Modus gewählt hat. Dies erhöht die Flexibilität für diejenigen, die ein neues Theme-Erlebnis wünschen, ohne zwei separate Stylesheets erstellen zu müssen.

Anwendung des Dark Mode in MVC-Projekten

Als Nächstes wechselt Tim zu einem älteren ASP.NET MVC-Projekt, um zu zeigen, wie man den Dark Mode in Anwendungen aktiviert, die noch nicht Bootstrap 5.3 verwenden. Als er die Bootstrap-CSS-Datei öffnet, stellt er fest, dass es sich um die Version 5.1.0 handelt, die den Dark Mode nicht unterstützt (5:07).

Aufwertung von Bootstrap in MVC mit CDN

Tim empfiehlt, die lokale Bootstrap-Datei durch die CDN-Version von der GetBootstrap-Website zu ersetzen. Bei 5:51 fügt er die CDN-Links in die Ansicht _Layout.cshtml ein und aktualisiert sowohl die CSS- als auch die JavaScript-Includes.

Auf diese Weise unterstützt die MVC-App dank der neueren Version von Bootstrap nun das Wechseln von Themen. Er weist auch darauf hin, dass CDNs dazu beitragen können, Ihre Website zu beschleunigen, insbesondere für Erstbesucher.

Anpassen des Navigationsstylings für den dunklen Modus

Nachdem er das dunkle Thema aktiviert hat, stellt Tim fest, dass einige Navigationsleistenstile damit in Konflikt stehen. Bei 6:40 entfernt er die Klassen navbar-light und bg-white, die helle Farben erzwingen, die das dunkle Erscheinungsbild stören.

Nach dem Entfernen passt sich die Navigationsleiste korrekt an den dunklen Modus an. Tim weist jedoch darauf hin, dass andere Textelemente oder Komponenten mit überschriebenen Farben möglicherweise noch manuell angepasst werden müssen (6:57). An dieser Stelle sollten Sie vielleicht themenspezifisches CSS schreiben oder CSS-Variablen zur einfacheren Verwaltung verwenden.

Zusammenfassung: Bootstrap 5.3 Theme-Unterstützung

Abschließend weist Tim noch einmal darauf hin, dass Bootstrap 5.3 sowohl dunkle als auch helle Themes vollständig unterstützt, Ihr benutzerdefiniertes CSS aber möglicherweise nicht. Wenn Sie Ihre Stile richtig strukturiert haben, indem Sie Klassen verwenden und fest kodierte Farben vermeiden, wird der Wechsel zwischen den Themen reibungsloser.

Um 8:00 Uhr betont er, dass das einfache Hinzufügen von:

data-bs-theme="dunkel"

zu Ihrem -Tag aktiviert den Dark Mode für Ihre gesamte ASP.NET-Website. Sie können das Attribut sogar auf ein bestimmtes Element wie eine Tabelle, eine Karte oder einen Abschnitt anwenden, so dass Sie Themen auf einer einzigen Seite kombinieren können.

Abschließender Tipp von Tim Corey

Wenn Sie sich ernsthaft mit Bootstrap oder Theming in ASP.NET Core befassen möchten, bietet Tim auch einen vollständigen Bootstrap-Kurs an, der tiefergehende Konzepte wie Layoutsysteme, Theming-Strategien und Best Practices für Barrierefreiheit behandelt.

Wenn Sie dem Video-Tutorial von Tim Corey folgen, können Sie den Dark Mode in Ihrer ASP.NET Core-App in nur einem Schritt implementieren - und ihn mithilfe von benutzerdefiniertem CSS, Themenerkennung und Toggle-Funktionalität feinabstimmen. Ganz gleich, ob Sie Anwendungen für Windows, das Web oder andere Plattformen entwickeln, diese Methode gibt Ihnen die Flexibilität, mühelos zwischen verschiedenen Themen zu wechseln und Ihre Benutzer zufrieden zu stellen.