Dark mode w aplikacjach — jak zrobić go porządnie

Dark mode przestał być fanaberią — to standard akceptowany przez 60-80% użytkowników aplikacji webowych po zmroku. Jednak „dorzucenie dark:bg-slate-900 do Tailwinda" to dopiero początek.

Trzy stany, nie dwa

Nowoczesne aplikacje mają trzy opcje:

• Light — ręcznie wybrany jasny
• Dark — ręcznie wybrany ciemny
• System — zgodny z preferencją OS (domyślnie)

Bez „system" zmuszasz użytkownika do ręcznej zmiany przy każdym uruchomieniu — frustracja gwarantowana.

FOUC — Flash of Unstyled Content

Najczęstszy bug: strona ładuje się w light, a po chwili „mignie" na dark. Dzieje się, gdy preferencja jest sprawdzana po renderze. Rozwiązanie — inline script przed body:

<script>
  const theme = localStorage.theme ||
    (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
  document.documentElement.classList.toggle('dark', theme === 'dark');
</script>

To musi być inline, nie z bundla — bundle ładuje się ZA wolno.

Nie używaj czystej czerni

#000000 na białym sprzęcie OLED daje bardzo wysoki kontrast — boli oczy. Zalecane:

• Tło: #0a0a0b do #18181b (slate-900 do slate-950)
• Tekst: #e5e5e5 zamiast czystego białego
• Akcent: ten sam co w light, ale o 10-15% jaśniejszy

CSS Variables zamiast „dark:" wszędzie

Dla projektów z dużą paletą barw — CSS Variables są czytelniejsze:

:root {
  --bg: #ffffff;
  --text: #0f172a;
  --accent: #dc2626;
}
.dark {
  --bg: #0a0a0b;
  --text: #e5e5e5;
  --accent: #ef4444;
}
body { background: var(--bg); color: var(--text); }

Obrazy w dark mode

Logo na białym tle wygląda fatalnie na ciemnym. Rozwiązania:

• Dwie wersje logo (light/dark), przełączane CSS-em
• SVG z atrybutem fill="currentColor" — przyjmuje kolor tekstu
• Filter filter: invert(1); jako fallback dla raster

Czego unikać

• Niskiego kontrastu w dark mode (WCAG 4.5:1 to minimum)
• Tych samych intensywnych kolorów akcentu — w dark powinny być nieco jaśniejsze i mniej nasycone
• Gradientów które wyglądały świetnie w light — w dark często „brudzą"
• Cieni — w dark mode prawie niewidoczne, użyj border zamiast tego