niedostosowanie do trybu ciemnego

Niedostosowanie do trybu ciemnego to brak wariantów kolorystycznych i grafik z przezroczystym tłem w szablonie.

Na czym polega niedostosowanie interfejsu do trybu ciemnego

Niedostosowanie do trybu ciemnego występuje wtedy, gdy interfejs aplikacji lub strony internetowej nie zmienia poprawnie kolorów po wybraniu ciemnego schematu systemu albo ustawieniu takiego wariantu bezpośrednio w programie. W praktyce może oznaczać brak osobnego zestawu kolorów, pozostawienie jasnego tła przy jasnych napisach, nieczytelne elementy formularza lub grafiki przygotowane wyłącznie dla jasnego tła. Samo odwrócenie barw całego ekranu nie jest pełnym rozwiązaniem, ponieważ może zmienić znaczenie kolorów, wygląd zdjęć i sposób prezentacji ikon.

W środowisku internetowym obsługa preferowanego schematu jest często realizowana za pomocą zapytania CSS prefers-color-scheme. Arkusz stylów może wówczas definiować osobne wartości dla tła, tekstu, obramowań, cieni i elementów interaktywnych. Przydatna jest również właściwość CSS color-scheme, która informuje przeglądarkę, jakie warianty kolorystyczne obsługuje dokument i pozwala dopasować wybrane elementy natywne, takie jak kontrolki formularzy. Jeżeli szablon nie zawiera takich reguł albo stosuje kolory zapisane na stałe, przełączenie systemu na tryb ciemny może nie przynieść oczekiwanej zmiany.

Kolory, kontrast i elementy, które tracą czytelność

Najczęstszy problem dotyczy kontrastu między pierwszym planem a tłem. Ciemnoszary tekst na czarnym tle może stać się trudny do odczytania, natomiast czysta biel na bardzo ciemnym tle bywa wizualnie męcząca przy długim czytaniu. Weryfikacja powinna obejmować nie tylko podstawowy tekst, lecz także nagłówki, linki, tekst pomocniczy, placeholdery, komunikaty błędów, fokus klawiatury oraz ikony przekazujące informację. W kryteriach WCAG 2.2 dla zwykłego tekstu stosuje się minimalny współczynnik kontrastu 4,5:1, a dla dużego tekstu 3:1. Dla istotnych elementów nietekstowych również obowiązuje wymóg odpowiedniej rozróżnialności.

Problematyczne są także kolory używane semantycznie. Czerwony komunikat błędu może zlać się z ciemnym tłem, zielony status może być niewidoczny dla części użytkowników, a obramowanie aktywnego pola może zniknąć po zmianie schematu. Informacja nie powinna zależeć wyłącznie od barwy, dlatego warto uzupełniać ją tekstem, ikoną, wzorem albo zmianą kształtu. Podczas sprawdzania interfejsu należy przejść przez główne widoki oraz stany komponentów: zwykły, aktywny, nieaktywny, najechany kursorem, zaznaczony i z komunikatem walidacyjnym. Błąd może występować tylko w jednym z tych stanów.

Przezroczyste grafiki i zależność od tła

Tryb ciemny ujawnia problemy, które nie wynikają bezpośrednio z arkusza stylów. Grafika z przezroczystym tłem może wyglądać poprawnie na białej powierzchni, ale zniknąć po umieszczeniu na czarnym lub granatowym tle. Dotyczy to szczególnie logotypów, ikon zapisanych jako PNG, elementów SVG oraz ilustracji zawierających jasne linie bez obwódki. Przezroczystość oznacza, że piksele obrazu przejmują kolor podłoża, dlatego ten sam plik może mieć różną czytelność w zależności od wariantu interfejsu.

Sprawdzenie powinno objąć obrazy w nagłówku, stopce, menu, przyciskach, kartach, banerach i komunikatach. Dla niektórych grafik właściwe jest przygotowanie dwóch wariantów, na przykład jasnego i ciemnego logotypu, albo zastosowanie grafiki wektorowej, której kolor można kontrolować za pomocą CSS. W SVG należy zweryfikować wartości atrybutów fill i stroke, a także to, czy kolor nie został zapisany na stałe w kilku miejscach. Dla zdjęć nie powinno się stosować automatycznego odwracania barw, ponieważ prowadzi ono do nienaturalnego wyglądu i może zniekształcić przekazywaną treść.

Sprawdzenie szablonu na różnych urządzeniach

Ocena niedostosowania wymaga porównania tego samego widoku w jasnym i ciemnym schemacie. Należy sprawdzić stronę na laptopie i komputerze PC, w aktualnie używanej przeglądarce, przy różnych poziomach powiększenia oraz w popularnych rozdzielczościach ekranu. Warto odświeżyć stronę po zmianie ustawień systemowych i sprawdzić, czy wariant kolorystyczny jest dobierany automatycznie, czy pozostaje zapisany w pamięci przeglądarki. Trzeba również zweryfikować, czy ustawienie użytkownika nie jest nadpisywane przez skrypt, lokalne style albo mechanizm pamiętający poprzedni wybór.

Warszawskie Pogotowie Komputerowe wykonuje profesjonalną naprawę laptopów i komputerów stacjonarnych PC, w tym diagnostykę problemów z oprogramowaniem oraz wyświetlaniem interfejsu. Przy analizie takiego przypadku można rozdzielić błąd samego szablonu od problemu z przeglądarką, sterownikiem grafiki, ustawieniami systemu lub rozszerzeniem zmieniającym wygląd stron. Pomocne są zrzuty ekranu z obu trybów, nazwa przeglądarki, opis momentu wystąpienia problemu oraz informacja, czy nieczytelność dotyczy całej strony, czy tylko wybranych elementów. Taki materiał ułatwia odtworzenie błędu i wskazanie właściwego miejsca do korekty.