TL;DR
Dark mode (tryb ciemny) to oczekiwana funkcja na stronach i w aplikacjach. Wdrożenie opiera się na preferencjach systemowych (prefers-color-scheme), zmiennych CSS i opcjonalnym przełączniku. Dobrze zrobiony poprawia UX i zmniejsza zmęczenie wzroku.
Dla kogo to jest
- Właścicieli stron i aplikacji webowych
- Frontend developerów planujących dark mode
- Osób dbających o dostępność i preferencje użytkownika
Fraza (SEO)
dark mode strona www, tryb ciemny implementacja, prefers-color-scheme, dark mode ux
Po co dark mode?
- Preferencje użytkownika – wielu użytkowników ma w systemie włączony tryb ciemny
- Mniej zmęczenia – przy dłuższym czytaniu i pracy wieczorem
- Spójność z systemem – strona nie „razi” przy ciemnym interfejsie OS
- Battery saving – na ekranach OLED ciemny interfejs zużywa mniej energii
Implementacja krok po kroku
1. Wykrywanie preferencji systemowej
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--text: #e5e5e5;
--accent: #3b82f6;
}
}
2. Zmienne CSS (theme tokens)
:root {
--bg: #ffffff;
--text: #171717;
--accent: #2563eb;
}
[data-theme="dark"] {
--bg: #0f0f0f;
--text: #fafafa;
--accent: #60a5fa;
}
3. Przełącznik + zapis w localStorage
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
}
// Przy ładowaniu: sprawdź localStorage, potem prefers-color-scheme
const saved = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
setTheme(saved || (prefersDark ? 'dark' : 'light'));
Best practices
- Nie tylko odwrócone kolory – dostosuj kontrast i odcienie (np. tła nie czyste #000)
- Obrazy i logo – rozważ warianty na ciemne tło lub delikatne tło pod obrazem
- Zachowaj przełącznik – nawet przy prefers-color-scheme użytkownik może chcieć nadpisać
- Testuj kontrast – WCAG nadal obowiązuje (min. 4.5:1 dla tekstu)
Checklista
- Zmienne CSS dla kolorów (bg, text, border, accent)
- Obsługa
prefers-color-scheme - Opcjonalny przełącznik z zapisem w localStorage
- Brak migotania przy pierwszym ładowaniu (script w head lub inline critical)
- Testy na urządzeniach z włączonym dark mode
FAQ
Czy dark mode wpływa na SEO?
Same kolory nie. Może wpłynąć pozytywnie na wskaźniki UX (czas na stronie, odrzuty), jeśli użytkownicy wolą ciemny motyw.
Czy muszę mieć przełącznik?
Nie. Wystarczy respektować prefers-color-scheme. Przełącznik daje kontrolę użytkownikowi i często jest mile widziany.
Jak uniknąć migotania (flash) przy ładowaniu?
Umieść mały skrypt w <head>, który przed renderem ustawi data-theme na podstawie localStorage lub prefers-color-scheme. Dopiero potem ładuj resztę.