Dark Mode w Design Systemie
Dark Mode to alternatywny motyw kolorystyczny z ciemnym tłem. Jego wdrożenie w Design Systemie wymaga przemyślanego systemu tokenów i testowania kontrastów.
Co to jest?
Dark Mode w Design Systemie to kompletny alternatywny motyw kolorystyczny, w którym tło jest ciemne, a tekst jasny. To nie jest prosty inverting kolorów — wymaga osobnego zestawu Design Tokenów, przetestowanych kontrastów, dostosowanych cieni i surface colors. Dobrze wdrożony Dark Mode zmniejsza zmęczenie oczu w ciemnych pomieszczeniach i oszczędza baterię na ekranach OLED.
Jak to działa?
Dark Mode bazuje na semantycznych Design Tokenach. Zamiast używać kolorów bezpośrednio (background: #FFFFFF), używasz tokenów (background: var(--color-surface)). Token color-surface ma wartość #FFFFFF w light mode i #1C1C1E w dark mode. Przełączenie motywu zmienia wartości tokenów, a cały interfejs się aktualizuje automatycznie.
Jak wdrożyć?
Przykłady z prawdziwych Design Systemów
Material Design 3 używa surface tint (jasniejsze odcienie primary na wyższych elevacjach) zamiast cieni. Primer GitHub oferuje aż 7 motywów kolorystycznych z auto-detection. Apple HIG stosuje semantic colors (systemBackground, label) które automatycznie adaptują się do trybu.