Jak dodać tryb ciemny do strony lub aplikacji (bez białego błysku)

Aby dodać tryb ciemny, zdefiniuj swoje kolory jako nazwane tokeny (tło, tekst, powierzchnia, obramowanie, akcent) zamiast wpisanych na sztywno wartości, nadaj każdemu tokenowi wartość jasną i ciemną, a przełączaj między nimi za pomocą funkcji CSS prefers-color-scheme, tak aby strona podążała za ustawieniem systemu odwiedzającego. Jeśli chcesz też ręcznego przełącznika, zapisz wybór w przeglądarce i zastosuj go małym wbudowanym skryptem w nagłówku strony, aby nie było białego błysku przy ładowaniu. Następnie sprawdź kontrast, obrazy i wykresy w obu motywach. W narzędziu do budowy aplikacji AI jeden jasny prompt załatwia większość tego; o jakości decyduje sprawdzanie.

Dwa podejścia

Większość aplikacji najlepiej wypada w drugim wariancie: domyślnie szanuje system, ale pozwala ludziom to nadpisać.

Zacznij od tokenów kolorów

Tryb ciemny jest bolesny, gdy kolory są rozsiane po kodzie jako white, #333 i gray-100. Jest łatwy, gdy każdy kolor pochodzi z małego zestawu nazwanych tokenów:

Każdy komponent używa nazw tokenów. Zmiana motywu oznacza wtedy podmianę jednego zestawu wartości, a nie edycję każdego komponentu.

Wskazówki dla ciemnej palety:

• Unikaj czystej czerni i czystej bieli na dużych powierzchniach; bardzo ciemna szarość i złamana biel są łatwiejsze do czytania.
• Pokazuj głębię jaśniejszymi powierzchniami, a nie cieniami — cienie słabo widać na ciemnym tle.
• Lekko odnasycaj jaskrawe kolory marki; mogą nieprzyjemnie świecić na ciemnym tle.
• Utrzymuj czytelny kontrast. Poziom AA w WCAG wymaga co najmniej 4,5:1 dla zwykłego tekstu. Przygaszony szary tekst często tego nie spełnia w ciemnych motywach.

Z Tailwind CSS

Tailwind jest domyślnym narzędziem stylowania w wielu aplikacjach budowanych przez AI. Według dokumentacji trybu ciemnego Tailwinda wariant dark: domyślnie używa prefers-color-scheme, więc klasy takie jak bg-white dark:bg-gray-900 podążają za ustawieniem systemu bez dodatkowej pracy.

Dla ręcznego przełącznika w Tailwind v4 dokumentacja pokazuje przełączanie wariantu na klasę na elemencie nadrzędnym:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

Następnie aplikacja dodaje lub usuwa klasę dark na elemencie głównym. Dokumentacja sugeruje też wbudowany skrypt w nagłówku, który stosuje zapisany wybór (lub ustawienie systemu) przed wyrenderowaniem strony — dokładnie tak unika się błysku.

Unikanie białego błysku

Błysk pojawia się, bo strona renderuje się najpierw w trybie jasnym, potem ładuje się JavaScript, odczytuje zapisany wybór i przełącza na ciemny. Rozwiązanie:

1. Umieść mały wbudowany skrypt w nagłówku strony, który odczytuje zapisany motyw i ustawia klasę na elemencie głównym, zanim cokolwiek się wyrenderuje.
2. Ustaw właściwość CSS color-scheme dla każdego motywu, aby elementy rysowane przez przeglądarkę (paski przewijania, kontrolki formularzy) pasowały.
3. Nadaj stronie jawny kolor tła w obu motywach.
4. Jeśli aplikacja jest renderowana po stronie serwera, upewnij się, że serwer i przeglądarka zgadzają się co do początkowego motywu, inaczej strona może się przerenderować i mrugać.

Przykładowe prompty

Pełna konfiguracja:

Dodaj tryb ciemny. Najpierw zamień wpisane na sztywno kolory na tokeny motywu (tło, powierzchnia, tekst, przygaszony tekst, obramowanie, akcent) z wartościami jasnymi i ciemnymi. Domyślnie użyj ustawienia systemowego odwiedzającego. Dodaj w nagłówku przełącznik motywu z opcjami Jasny, Ciemny i Systemowy, zapamiętaj wybór w localStorage i zastosuj go wbudowanym skryptem w head, aby nie było białego błysku przy ładowaniu. Ustaw color-scheme dla każdego motywu. Zachowaj obecny jasny wygląd dokładnie tak, jak jest.

Poprawki tego, co zostało:

Sprawdź każdą stronę w trybie ciemnym i popraw: tekst o niskim kontraście (celuj w co najmniej 4,5:1), wpisane na sztywno białe tła, obramowania, które znikają, wykresy z ciemnym tekstem na ciemnym tle oraz logo, które znikają. Nie zmieniaj jasnego motywu.

Obrazy i wykresy:

Używaj jasnej wersji logo w trybie ciemnym. Osie wykresów, siatki i etykiety niech używają tokenów motywu. Nadaj zrzutom ekranu subtelne obramowanie w trybie ciemnym, aby nie stapiały się z tłem.

Krok po kroku

1. Zrób audyt kolorów. Znajdź wpisane na sztywno kolory i zamień je na tokeny. To największa część pracy.
2. Zdefiniuj wartości ciemne dla każdego tokenu.
3. Podążaj za systemem za pomocą prefers-color-scheme (albo domyślnego dark: w Tailwindzie).
4. Dodaj przełącznik, jeśli chcesz: Jasny, Ciemny, Systemowy. Zapisz wybór w przeglądarce; w aplikacjach z logowaniem możesz też zapisać go w profilu użytkownika.
5. Zapobiegnij błyskowi wbudowanym skryptem w nagłówku i color-scheme.
6. Sprawdź trudne miejsca: logo, ikony, obrazy z białym tłem, wykresy, bloki kodu, mapy, osadzenia, e-maile.
7. Testuj oba motywy na komputerze i telefonie, z systemem ustawionym na jasny i na ciemny, oraz po twardym odświeżeniu.

Typowe błędy

• Odwracanie wszystkiego. Filtr odwracający kolory psuje zdjęcia i kolory marki.
• Zostawione wpisane na sztywno kolory. Jedna biała karta na ciemnej stronie rzuca się w oczy od razu.
• Szary tekst o niskim kontraście. Wygląda stylowo, ale nie spełnia wymogów czytelności.
• Biały błysk przy ładowaniu. Szczególnie widoczny na telefonach w nocy.
• Zapomniane osadzenia zewnętrzne. Mapy, filmy i widżety mogą pozostać jasne; sprawdź, czy mają opcję ciemną.
• Przełącznik z tylko dwoma stanami. Gdy ktoś go kliknie, nie może już wrócić do podążania za systemem.
• Zepsucie jasnego motywu. Napisz wprost w prompcie, że jasny projekt ma pozostać bez zmian.

Lista kontrolna

• Wszystkie kolory pochodzą z tokenów motywu
• Domyślnie podąża za ustawieniem systemu
• Opcjonalny przełącznik Jasny, Ciemny i Systemowy, zapamiętany
• Brak białego błysku przy ładowaniu i odświeżaniu
• color-scheme ustawione, aby kontrolki formularzy i paski przewijania pasowały
• Kontrast tekstu co najmniej 4,5:1 w obu motywach
• Logo, obrazy, wykresy i osadzenia sprawdzone w trybie ciemnym
• Jasny motyw bez zmian
• Przetestowane na komputerze i telefonie

Tryb ciemny w Mythex

Aplikacje zbudowane w Mythex domyślnie używają Vite, Reacta, TypeScriptu i Tailwinda, więc podejście z Tailwindem opisane wyżej stosuje się bezpośrednio: wklej pełny prompt konfiguracji w czacie, a potem sprawdź Preview w obu motywach i przy szerokości telefonu. Wskazówka Mythex dotycząca promptów projektowych to nazywanie tego, co zmienić, i tego, co zachować — tu ma to znaczenie: napisz wprost, że jasny motyw ma pozostać taki, jaki jest. Zobacz Design & UI prompts i w razie potrzeby cofnij przebieg, przywracając punkt kontrolny (checkpoint).

Więcej o tym, jak uzyskać dobry wygląd, znajdziesz w jak zaprojektować dobrze wyglądającą aplikację dzięki AI oraz jak pisać prompty dla narzędzi do budowy aplikacji AI.

Pytania