Ciemny tryb i komfort widzenia

1) Dlaczego ciemny motyw

Komfort oczu w niskim świetle, mniej blasku i „błysków światła”.
Energia: Ciemne ekrany wydają mniej baterii na OLED/AMOLED.
Skupienie się na danych: Skupienie się na treści, a nie na tle.
Oczekiwania użytkowników: flaga systemu „preferuje kolor-schemat” jest de facto standardem.

2) Zasady

1. Ciemnoszare tło> czysty czarny dla powierzchni interfejsu użytkownika (lepsza czytelność i gradacja).
2. Kontrast w treści: nie „biały w czerni”, ale miękkie odcienie dla długich tekstów.
3. Ostrożna „jasność”: podświetlenia/akcenty są tłumione, ale wyróżniające.
4. Głębia cienia: pracujemy z jasnym/niewyraźnym cieniem, a nie ostrym kontrastem.
5. Dostępność: WCAG AA (minimum), widoczne skupienie i zrozumiałe stany.
6. Ustawienia systemu są podstawowe: automatyczne przełączanie i „ograniczony ruch”.

3) Paleta i żetony (przykład)

json
{
"mode": "dark",
"color": {
"bg": { "base": "#0E1116", "elev1": "#141821", "elev2": "#1A1F2B", "subtle": "#0B0E13" },
"fg": { "primary": "#E6E8EB", "muted": "#A6AEB8", "inverse": "#11131A" },
"accent": { "primary": "#6EA0FF", "warning": "#FFB547", "critical": "#FF6A6A", "success": "#66D19E" },
"border": { "soft": "#2A2F37", "strong": "#3A4150" },
"chart": { "a": "#6EA0FF", "b": "#66D19E", "c": "#FFB547", "d": "#C58CFF", "e": "#7DD3FC" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.35)", "md": "0 6px 18px rgba(0,0,0,.45)" }
}

css
@media (prefers-color-scheme: dark) {
:root {
--bg-base:#0E1116; --bg-elev1:#141821; --bg-elev2:#1A1F2B;
--fg-primary:#E6E8EB; --fg-muted:#A6AEB8;
--accent:#6EA0FF; --warning:#FFB547; --critical:#FF6A6A; --success:#66D19E;
--bd-soft:#2A2F37; --bd-strong:#3A4150;
}
}

• Akcenty w trybie ciemnym są + 8-12% lżejsze niż w trybie światła.
• Użyj szarości (4-5 kroków), unikając bezwzględnego # 000 dla dużych obszarów (wyjątek - tryb AMOLED).

4) Tekst i czytelność

Tekst ciała: jasnoszary '# E6E8EB' do '# 0E1116' (kontrast ~ 12:1).
Tekst wtórny: „# A6AEB8”; wskazówki - jeden krok ciemniejszy/bardziej przezroczysty.
Długi odczyt: lekko ciepłe odcienie (zmniejszyć „halo”).
Linki - akcent + domyślnie podkreślać; kolor i jedyne medium znaczenia.

5) Powierzchnie, głębokość i szkło

Wysokość: 'podstawa' → 'elev1' → 'elev2'; każda warstwa jest lżejsza/cieplejsza o 2-4%.
Cienie są miękkie, szerokie, o niskiej nieprzezroczystości; unikać „świecących” udarów.
Przezroczyste panele (rozmyte) są umiarkowanie odpowiednie; kontrastować tekst z podstawą.
Wyznaczniki są półcienkimi granicami '-bd-soft' lub ledwo widocznymi 'spadkobiercami'.

6) Państwa i skupienie

Hover: + 2-3% lżejsze tło; Aktywny: − 2-3% (ciemniejszy).
Uwaga: jasny pierścień (np. "outline: 2px solid # 6EA0FF; kontur-offset: 2px; ') widoczne na przyciskach akcentu.
Niepełnosprawny: starannie zmniejszyć kontrast; nie spadają poniżej czytelnego poziomu tekstu.

7) Przyciski, formy i tabele

Podstawowy: tło '--accent', tekst '# 0E1116'.
Wtórne: tło '--bg-elev1', granica '--bd-strong', tekst '--fg-primary'.
Pola wejściowe: tło '--bg-elev1', z naciskiem - granica akcentu; placeholder jest nudniejszy, ale czytelny.
Tabele: tło zebry jest ledwo zauważalne, wybór rzędu w zawisie jest + 2-3% lżejszy.

8) Ilustracje, logo i zdjęcia

Logo i piktogramy - wersje inwersji na ciemności; unikać cienkich, lekkich linii na nasyconych tle.
Zdjęcie: Dodaj ciemną maskę (40-60%) do kontrastujących nagłówków na górze.
Ikony: pojedyncza grubość, kontur + wypełnienie - według stanu, a nie „trujące” kolory.

9) Wizualizacja danych w ciemnym motywie

Kolory rzędów są umiarkowane nasycenie; co najmniej 5 odrębnych tonów.
Siatki i osie - wyciszone (alfa 20-30%), podpisy - '--fg-muted'.
Adnotacje/incydenty są żywe, ale czytelne; podkreślają kształt/marker, nie tylko kolor.
Puste dane/lag - miękkie „mgły”, nie białe pola.

10) Wydajność i bateria

OLED naprawdę oszczędza czysty czarny (# 000) - używać w trybie AMOLED zgodnie z opcją użytkownika.
Unikaj solidnego dużego blasku/rozmycia na słabych procesorach GPU.
Szacunek „preferuje zredukowany ruch”: uproszczenie animacji/przejść.

11) Zachowanie i przełączanie

Domyślnym zadaniem jest podążanie za 'preferers-color-scheme'.
Daj użytkownikowi wyraźny przełącznik (Light/Dark/System), zachowaj wybór (cookie/ Storage).
Przy zmianie tematu - brak błysków: przed renderowaniem dodaj klasę tematyczną.

html
<script>
const saved = localStorage. getItem('theme');
const sysDark = window. matchMedia?.('(prefers-color-scheme: dark)'). matches;
document. documentElement. dataset. theme = saved?? (sysDark? 'dark': 'light');
</script>

12) Dostępność (A11y)

Kontrast tekstu ≥ 4. 5:1 (regularne), ≥ 3:1 (duże).
Nie koduj stanu tylko w kolorze: użyj ikony/wzoru/podpisu.
Style ostrości i nawigacja klawiatura są obowiązkowe.
Głos/Plecy: role, etykiety, taba queuing.

13) Anty-wzory

Absolutnie biały tekst na absolutnie czarnym tle w dużych obszarach - „migotanie” i zmęczenie.
Neon akcentuje ciemność - „lekki hałas”.
Wysokie cienie kontrastowe (szary na czarnym z twardą granicą).
Przezroczysty tekst na zdjęciu bez maski.
Zanikający łożyskowiec (alfa zbyt niski).

14) Przykłady komponentów

Przycisk

css
.button {
background: var(--accent); color: var(--bg-base);
border-radius: 12px; padding: 10px 16px;
box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.button:hover { filter: brightness(1. 06); }
.button:active { filter: brightness(.94); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

Karta

css
.card {
background: var(--bg-elev1); border: 1px solid var(--bd-soft); border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

15) Plan badania

Oświetlenie: ciemny pokój/światło dzienne/ulica wieczorem.
Urządzenia: OLED i IPS, mobilny/pulpit, różne gęstości.
A11y: kontroler kontrastu, przepustka klawiaturowa, czytelność znaczników.
Percepcja: ab-test „zmęczenie oczu” i błędy wejściowe w nocy.
Wydajność: mierniki RUM (INP/CLS) po włączeniu ciemnego tematu; Obciążenie GPU (efekt rozmycia/cienia).

16) Wskaźniki jakości

Elementy Violations/1k kontrastu (cel: → 0).
Wskaźnik skarg na „zbyt ciemny/jasny”.
Zakończenie sesji nocnej (metryki behawioralne przez sesję 22: 00-06: 00).
INP/CLS p75 w trybie ciemnym vs Light (nie gorzej niż podstawowy).
Opt-in Dark Mode i zachowanie użytkowników, którzy wybierają motyw.

17) Lista kontrolna startu

• Ciemna paleta tematyczna o 4-5 poziomach powierzchni
• Kontrast tekstu/ikon/granic odpowiada WCAG AA
• Widoczne style i stany ostrości (hover/active/disabled)
• Logo/ikony/zdjęcia dostosowane, maski na zdjęciu dodane
• Wykresy - wyciszone siatki, czytelne napisy, rzędy nietoksyczne
• Przełącznik światła/ciemności/systemu, zaoszczędzenie wyboru bez „flash”
• Poszanowanie „preferencji kolorystycznych” i „preferencji zredukowanych ruchów”
• RUM/deska rozdzielcza perf, alerty regresyjne

18) Plan realizacji (3 iteracje)

Iteracja 1 - Fundacja (1-2 tygodnie)

Paleta/żetony, powierzchnie bazowe (base/elev1/elev2), tekst/granice, przyciski/pola/tabele, przełącznik tematyczny.

Iteracja 2 - Ziarnistość (3-4 tygodnie)

Wykresy i ilustracje w ciemności, maski na zdjęciu, focus/states, animacje z uwzględnieniem redukcji ruchu, perf-audyt.

Iteracja 3 - optymalizacja (ciągła)

Tryb AMOLED jako opcja, kontrasty dostrajające, testy użyteczności w nocy, porównanie Light vs Dark RUM, regularne audyty marki/UX.

19) Mini-FAQ

Mam zrobić czyste czarne tło?
Dla UI, głęboki ciemny szary jest lepszy; zostaw czysty # 000 z opcją „tryb AMOLED”.

Czy muszę zwiększyć nasycenie akcentów?
W ciemności - zazwyczaj, wręcz przeciwnie, lekko rozjaśnić i zmniejszyć nasycenie, aby nie „blask”.

A co z banerami?
Dodaj ciemne tło/maskę, sprawdź kontrast tekstu i logo.

Razem

Ciemny motyw to nie inwersja kolorów, ale oddzielny tryb projektowania: przemyślana paleta, poziomy powierzchni, czytelność, poprawne stany, dostosowana grafika i media oraz szacunek dla ustawień systemu. Chudy na żetony, kontrast i wydajność kontroli - a Dark Mode to wygodne, stabilne i piękne narzędzie dla nocnych i dziennych użytkowników.