Ciemny tryb w projektowaniu stron i aplikacji: Kiedy go wprowadzić i podstawowe zasady jego implementacji

Tryb ciemny to wariant interfejsu z ciemnym tłem i jasną treścią, odwrotność domyślnego układu jasnego. Argumenty za nim są trzy. Komfort pracy przy słabym oświetleniu — jasny ekran w ciemnym pokoju męczy wzrok. Zużycie energii na ekranach OLED, gdzie czarne piksele po prostu się nie świecą. I preferencja estetyczna, która okazała się silniejsza, niż zakładano. Systemy operacyjne dodały tryb ciemny na przełomie 2018 i 2019 roku i od tego czasu użytkownicy traktują go jako element standardu, a nie dodatek. W praktyce większość poważnych aplikacji ma dziś oba warianty, a ich brak bywa odbierany jako zaniedbanie.

Nie używaj czystej czerni na tło — ciemna szarość jest łagodniejsza dla oka i lepiej pokazuje warstwy interfejsu. Nie stawiaj też czystej bieli na tekst: lekko przygaszona biel czyta się spokojniej, a różnica w kontraście jest niewielka. Zgas nasycenie kolorów akcentujących — barwa, która na jasnym tle wygląda energicznie, na ciemnym potrafi razić. Wysokość elementów pokazuj jaśniejszym odcieniem tła, nie cieniem: cień na ciemnym tle jest niewidoczny, więc karta „unosi się” przez rozjaśnienie. Sprawdzaj efekt na kilku ekranach, bo panele różnie oddają ciemne odcienie. Wykrywaj ustawienie systemowe użytkownika, ale zostaw też przełącznik — preferencja bywa inna dla konkretnej aplikacji niż dla całego systemu.

Punktem wyjścia jest zapytanie o preferencję systemu, czyli @media (prefers-color-scheme: dark). Kolory warto trzymać we własnych właściwościach CSS i podmieniać same wartości zamiast pisać drugi zestaw reguł — wtedy tryb ciemny to kilkanaście linii, a nie równoległy arkusz stylów. Ręczne przełączanie realizuje się klasą na elemencie nadrzędnym plus zapisem wyboru w pamięci przeglądarki, żeby przetrwał odświeżenie. Popularne narzędzia mają to gotowe: Tailwind ma przedrostek dark:, w aplikacjach Next.js używa się bibliotek do motywów, biblioteki komponentów mają własnych dostawców motywu. Przejścia kolorów warto animować delikatnie, żeby przełączenie nie było gwałtowne — ale krótko, bo długa animacja na całym interfejsie wygląda niechlujnie.

Wymagania kontrastu obowiązują tak samo: 4,5:1 dla zwykłego tekstu i 3:1 dla dużego. W trybie ciemnym łatwiej je spełnić, ale uwaga na tekst z przezroczystością — realny kontrast liczy się względem tego, co jest pod spodem, a nie względem wartości koloru. Ważniejsze jest co innego: tryb ciemny nie jest z natury bardziej dostępny. Części osób, na przykład ze światłowstrętem, ułatwia czytanie; innym, zwłaszcza z astygmatyzmem, utrudnia, bo jasny tekst na ciemnym tle potrafi się rozmywać. Dlatego wybór ma należeć do użytkownika. Sprawdź też barwy marki w obu wariantach, przygotuj wersje logotypów i ilustracji na ciemne tło, a systemowy tryb wysokiego kontrastu uszanuj zamiast go nadpisywać.

Czysta czerń na tle i czysta biel na tekście — połączenie najbardziej męczące dla oka. Odwrócenie palety z trybu jasnego bez zgaszenia nasycenia, przez co kolory akcentujące rażą. Zapomniane obrazy: logotypy i ilustracje przygotowane pod białe tło, które na ciemnym mają brzydką obwódkę. Niepełne pokrycie, gdzie część ekranów jest ciemna, a część nie — to dezorientuje bardziej niż brak trybu ciemnego w ogóle. Pominięte wiadomości e-mail i generowane dokumenty, które zostają jasne, choć aplikacja jest ciemna. Ignorowanie preferencji systemowej przy pierwszym uruchomieniu. I brak przełącznika, przez który użytkownik nie ma jak zmienić wyboru narzuconego przez system.