Projektowanie stron internetowych w trybie ciemnym: najlepsze praktyki i przewodnik implementacji

Tryb ciemny ewoluował od preferencji deweloperów do głównego nurtu oczekiwań projektowych. Ponad 80% deweloperów używa trybu ciemnego w swoich IDE, a główne systemy operacyjne zawierają teraz systemowe motywy ciemne. Użytkownicy oczekują, że strony i aplikacje będą respektować ich preferencje. Ten przewodnik obejmuje zasady projektowania, teorię kolorów, implementację CSS i kwestie dostępności potrzebne do stworzenia skutecznego doświadczenia trybu ciemnego.

Dlaczego tryb ciemny jest ważny

Tryb ciemny to nie tylko wybór estetyczny. Oferuje użytkownikom wymierne korzyści. W środowiskach o słabym oświetleniu ciemne tła zmniejszają zmęczenie oczu, redukując ilość światła emitowanego przez ekran. Na wyświetlaczach OLED i AMOLED ciemne piksele zużywają znacznie mniej energii niż jasne, wydłużając żywotność baterii urządzeń mobilnych. Tryb ciemny tworzy również hierarchię wizualną poprzez kontrast, przyciągając uwagę do treści i elementów interaktywnych.

Jednak źle zaimplementowany tryb ciemny może być gorszy niż jego brak. Wysoki kontrast między czysto białym tekstem a czysto czarnym tłem powoduje efekt halo, w którym tekst wydaje się rozmyty lub świecący. Kluczem jest znalezienie właściwej równowagi między kontrastem a komfortem.

Teoria kolorów w trybie ciemnym

Najczęstszym błędem w projektowaniu trybu ciemnego jest po prostu odwrócenie schematu jasnego. To podejście zawodzi, ponieważ percepcja kolorów zmienia się na ciemnym tle. Kolory, które wydają się żywe na białym, mogą wydawać się ostre lub przytłaczające na ciemnych powierzchniach, a subtelne różnice w jasnych cieniach stają się niewidoczne na ciemnym.

Kolor t\u0142a

Unikaj używania czystej czerni (#000000) jako tła. Czysta czerń tworzy nadmierny kontrast z białym tekstem, powodując zmęczenie oczu. Zamiast tego użyj ciemnoszarego z lekkim odcieniem, aby dodać głębi i wizualnego zainteresowania.

Kolor tekstu

Podobnie unikaj używania czystej bieli (#ffffff) jako tekstu głównego. Użyj odcieni złamanej bieli, które zachowują czytelność przy jednoczesnym zmniejszeniu olśnienia. Zarezerwuj czystą biel dla nagłówków i wyróżnień.

• Tekst główny: #e2e8f0 lub #f1f5f9, komfortowe czytanie
• Tekst drugorzędny: #94a3b8, dla opisów i etykiet
• Tekst wyłączony: #64748b, dla nieaktywnych elementów

Kolor akcentujący

Kolory akcentujące często wymagają dostosowania do trybu ciemnego. Nasycone kolory, które dobrze działają na białym tle, mogą wydawać się wibrujące na ciemnych powierzchniach. Nieznacznie zmniejsz nasycenie kolorów akcentujących i zwiększ ich jasność, aby zachować widoczność bez powodowania zmęczenia wzroku.

Implementacja CSS

Najbardziej łatwym w utrzymaniu podejściem do trybu ciemnego jest użycie niestandardowych właściwości CSS (zmiennych) z zapytaniem media prefers-color-scheme. Pozwala to zdefiniować kolory raz i przełączać motywy poprzez zmianę wartości zmiennych.

Używanie niestandardowych właściwości CSS

:root {
  --bg: #f8fafc;
  --bg-card: #ffffff;
  --text: #1e293b;
  --text-muted: #64748b;
  --primary: #3b82f6;
  --border: #e2e8f0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --bg-card: #1e293b;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --primary: #60a5fa;
    --border: #334155;
  }
}

body {
  background: var(--bg);
  color: var(--text);
}

Ręczne przełączanie za pomocą JavaScript

Podczas gdy prefers-color-scheme obsługuje preferencje systemowe, użytkownicy potrzebują również ręcznego przełączania. Przechowuj preferencje w localStorage i stosuj je przez atrybut data na elemencie głównym.

function toggleTheme() {
  const current = document.documentElement.dataset.theme;
  const next = current === 'dark' ? 'light' : 'dark';
  document.documentElement.dataset.theme = next;
  localStorage.setItem('theme', next);
}

// On page load
const saved = localStorage.getItem('theme');
if (saved) {
  document.documentElement.dataset.theme = saved;
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.dataset.theme = 'dark';
}

Następnie użyj selektora atrybutu w CSS razem z podejściem zapytania media:

[data-theme="dark"] {
  --bg: #0f172a;
  --bg-card: #1e293b;
  --text: #e2e8f0;
}

Obsługa hierarchii i głębi

W trybie jasnym cienie przekazują hierarchię. W trybie ciemnym cienie są mniej widoczne na ciemnych powierzchniach. Zamiast tego użyj stopniowo jaśniejszych kolorów tła, aby wskazać hierarchię. Każda warstwa powinna być nieco jaśniejsza od tej poniżej, tworząc wizualną hierarchię naśladującą światło padające na wypukłe powierzchnie.

• Warstwa 0: tło podstawowe (najciemniejsze)
• Warstwa 1: karty i kontenery (nieco jaśniejsze)
• Warstwa 2: elementy pływające, takie jak menu rozwijane (jaśniejsze)
• Warstwa 3: modale i okna dialogowe (najjaśniejsza wypukła powierzchnia)

Obrazy i media w trybie ciemnym

Jasne obrazy mogą wydawać się rażące na ciemnym tle. Użyj filtrów CSS, aby nieznacznie przyciemnić obrazy w trybie ciemnym. W przypadku logo i ikon zapewnij jasne wersje alternatywne.

[data-theme="dark"] img {
  filter: brightness(0.9);
}

[data-theme="dark"] .logo-dark {
  display: inline-block;
}

[data-theme="dark"] .logo-light {
  display: none;
}

Kwestie dostępności

Tryb ciemny musi spełniać te same standardy dostępności co tryb jasny. Wytyczne WCAG 2.1 wymagają minimalnego kontrastu 4,5:1 dla normalnego tekstu i 3:1 dla dużego tekstu. Użyj narzędzia do sprawdzania kontrastu, aby przetestować swój ciemny motyw pod kątem zgodności.

• Nigdy nie polegaj wyłącznie na kolorze: używaj ikon, wzorów lub etykiet wraz z kolorem, aby przekazywać informacje.
• Testuj z czytnikiem ekranu: upewnij się, że przełączanie motywu jest dostępne i ogłasza swój stan.
• Respektuj prefers-reduced-motion: wyłącz lub ogranicz animacje dla użytkowników preferujących redukcję animacji.
• Zapewnij odpowiednie wskaźniki fokusu: pierścienie fokusu muszą być widoczne w obu motywach. Użyj kontrastujących kolorów obrysu.

Typowe błędy trybu ciemnego

• Używanie czysto czarnego tła: tworzy nadmierny kontrast i efekt halo. Użyj ciemnoszarego zamiast tego.
• Zapominanie o dostosowaniu cieni: ciemne cienie na ciemnym tle są niewidoczne. Użyj jaśniejszych kolorów powierzchni do wskazania hierarchii.
• Ignorowanie obrazów: jasne obrazy na ciemnym tle tworzą dysonans wizualny. Zastosuj filtr jasności lub zapewnij ciemne warianty.
• Kodowanie kolorów na sztywno: uniemożliwia przełączanie motywu. Zawsze używaj niestandardowych właściwości CSS.
• Nie utrwalaj preferencji użytkownika: Użytkownicy są sfrustrowani, jeśli motyw resetuje się podczas nawigacji. Przechowuj preferencje w localStorage.
• Flash of Unstyled Content (FOUC): użyj skryptu inline przed CSS, aby ustawić motyw przed renderowaniem strony.