Dodaj tryb ciemny do .NET Core za pomocą zaledwie JEDNEJ linii kodu!

Wprowadzenie funkcji trybu ciemnego w ASP.NET Core

Tim rozpoczyna samouczek od omówienia powszechnego wymogu w nowoczesnych aplikacjach webowych — umożliwienia trybu ciemnego w ASP.NET Core. Niezależnie od tego, czy używasz Blazor, MVC, czy Razor Pages, Bootstrap 5.3 wprowadza obsługę ciemnych motywów w bardzo prosty sposób.

Jak wyjaśnia Tim, ta funkcja trybu ciemnego może być aktywowana jedną linią kodu — co czyni ją szybkim i skutecznym rozwiązaniem dla deweloperów, którzy chcą ulepszyć interfejs użytkownika swojej strony internetowej. Nowa obsługa trybu ciemnego jest szczególnie przydatna dla użytkowników, którzy wolą jasny motyw lub ciemny interfejs w oparciu o ustawienia systemówe lub osobiste preferencje.

Sprawdzanie wersji Bootstrap w aplikacji Blazor Web

Tim używa Visual Studio do przejścia przez projekt aplikacji Blazor. Nawigując do folderu wwwroot, otwiera plik bootstrap.min.css, aby potwierdzić, że aplikacja używa wersji Bootstrap 5.3.3. O 1:01 zauważa, że do obsługi trybu ciemnego wymagańa jest wersja 5.3 lub wyższa.

Jeśli Twój projekt już używa tej wersji lub późniejszej, nie ma konieczności aktualizacji Bootstrap ani dodawania dodatkowych narzędzi. Jest to kluczowy krok, ponieważ starsze wersje Bootstrap nie obsługują przełączania motywów za pomocą atrybutu data-bs-theme.

Jedna linia kodu do włączenia ciemnego motywu

W tym momencie Tim otwiera plik App.razor. Zaznacza tag i demonstruje, jak zastosować ciemny motyw do całej aplikacji za pomocą jednego atrybutu HTML:

data-bs-theme="dark"

To proste dodanie informuje Bootstrap, aby zastosować schemat kolorów ciemnych na wszystkich stronach i elementach. Tim uruchamia aplikację przed i po dodaniu linii, aby pokazać kontrast. O 2:03 włącza tryb ciemny i potwierdza, że motyw aktualizuje się natychmiast.

Dostosowywanie pod kątem niestandardowego CSS w trybie ciemnym

Tim zwraca uwagę, że podczas gdy ta jednowierszowa zmiana zmienia ogólny kolor tła i motyw, istniejący CSS może nadal kolidować z trybem ciemnym. Na przykład, białe teksty, rozmiary czcionek czy tła zakodowane na stałe w plikach CSS nie dostosują się automatycznie.

Jak zauważa Tim o 2:34, im więcej niestandardowych stylów napisaliśmy, tym więcej będziemy musieli edytować i testować. Dlatego zaleca rozpoczęcie pracy z trybem ciemnym na wczesnym etapie rozwoju, gdy mniej elementów wymaga dostosowania.

Przełączanie między jasnymi a ciemnymi motywami

O 2:50 Tim podkreśla, że można również przełączać się między ciemnymi a jasnymi motywami. Zmieniając atrybut na data-bs-theme="light", aktywujesz ponownie jasny motyw:

data-bs-theme="light"

Tim sugeruje, że deweloperzy mogli by pozwolić użytkownikom wybierać swoje preferencje motywu — na przykład, dodając przełącznik za pomocą JavaScript lub logiki po stronie serwera.

Ta możliwość przełączania między ciemnymi a jasnymi motywami jest coraz bardziej oczekiwana przez użytkowników, szczególnie w aplikacjach Windows lub urządzeniach mobilnych, gdzie preferowany schemat kolorów jest automatycznie wykrywany.

Rozwiązywanie konfliktów układu w ASP.NET Core

Jednym z powszechnych wyzwań, jak wyjaśnia Tim, są niespójne style na niektórych elementach — takich jak górny pasek nawigacyjny. W 3:12 pokazuje, jak plik CSS specyficzny dla układu (MainLayout.razor.css) nadpisuje domyślne właściwości Bootstrap.

Znajduje selektor .top-row ustawiający kolor bezpośrednio, co nie reaguje na ustawienie motywu. Jego rozwiązanie: usunąć właściwość koloru, aby Bootstrap mógł zarządzać stylem w oparciu o bieżący motyw (3:47).

Po usunięciu tego nadpisania, ciemny motyw wygląda czyściej. A gdy wraca do jasnego motywu, nadal działa — pokazując, że Bootstrap dynamicznie stosuje wartości kolorów oparte na wybranym motywie.

Używanie reguł CSS specyficznych dla motywu

O 4:17 Tim oferuje kolejny pomocny tip: deweloperzy mogą użyć wykrywania motywu wewnątrz swojego CSS, aby zastosować różne style w zależności od aktywnego trybu. Pozwala to reagować na wartość data-bs-theme i stylizować aplikację odpowiednio.

Na przykład, można dostosować rozmiar czcionki, kolor tekstu, a nawet obrazy w zależności od tego, czy użytkownik wybrał tryb ciemny czy jasny. To dodaje elastyczności dla tych, którzy chcą nowego doświadczenia z motywem bez tworzenia dwóch oddzielnych arkuszy stylów.

Zastosowanie ciemnego trybu w projektach MVC

Następnie Tim przechodzi do starszego projektu ASP.NET MVC, aby pokazać jak włączyć tryb ciemny w aplikacjach, które jeszcze nie używają Bootstrap 5.3. Kiedy otwiera plik CSS Bootstrap, zauważa, że to wersja 5.1.0, która nie obsługuje trybu ciemnego (5:07).

Aktualizacja Bootstrap w MVC z CDN

Tim zaleca zastąpienie lokalnego pliku Bootstrap wersją CDN z GetBootstrap. W 5:51 wkleja linki CDN do widoku _Layout.cshtml, aktualizując zarówno CSS, jak i JavaScript.

Dzięki temu aplikacja MVC teraz obsługuje przełączanie motywów, dzięki nowszej wersji Bootstrap. Zauważył również, że CDN mogą przyspieszyć Twoją stronę, zwłaszcza dla odwiedzających po raz pierwszy.

Dostosowywanie stylizacji nawigacji w trybie ciemnym

Po włączeniu trybu ciemnego, Tim stwierdza, że niektóre style paska nawigacyjnego z nim kolidują. W 6:40 usuwa klasy navbar-light i bg-white, które wymuszały jasne kolory, co zakłócało ciemny wygląd.

Po ich usunięciu pasek nawigacyjny dostosowuje się poprawnie do trybu ciemnego. Ale Tim ostrzega, że inne elementy tekstowe lub komponenty z nadpisanymi kolorami mogą nadal wymagać ręcznego dostosowania (6:57). To miejsce, gdzie warto napisać CSS świadomy motywu lub użyć zmiennych CSS dla łatwiejszego zarządzania.

Podsumowanie: Obsługa motywów Bootstrap 5.3

Tim kończy, przypominając, że Bootstrap 5.3 w pełni obsługuje zarówno ciemne, jak i jasne motywy, ale Twoje niestandardowe CSS mogą nie. Jeśli prawidłowo ustrukturyzowałeś swoje style, korzystając z klas i unikając zakodowanych kolorów, przełączanie motywów stanie się płynniejsze.

O 8:00 podkreśla, że po prostu dodając:

data-bs-theme="dark"

do swojego tagu aktywujesz tryb ciemny w całej witrynie ASP.NET. Możesz nawet zastosować atrybut do konkretnego elementu, jak tabela, karta czy sekcja, pozwalając łączyć motywy na jednej stronie.

Ostateczna wskazówka od Tim'a Corey'a

Jeśli poważnie myślisz o Bootstrap lub motywach w ASP.NET Core, Tim ma również kompletny kurs Bootstrap, który omawia głębsze koncepcje, w tym systemy układów, strategie motywów i najlepsze praktyki dostępności.

Śledząc samouczek wideo Tim'a Corey'a, możesz włączyć tryb ciemny w swojej aplikacji ASP.NET Core w zaledwie jednym kroku — i dostosować ją za pomocą niestandardowego CSS, wykrywania motywów i funkcji przełączania. Niezależnie od tego, czy tworzysz aplikacje dla Windows, web czy innych platform, ta metoda daje Ci elastyczność, aby bez trudu przełączać tematy i utrzymać użytkowników zadowolonych.