Dark mode dizajn: Kompletný návod

Prečo dark mode?

Dark mode nie je len trend — má praktické výhody:

• —Šetrí batériu na OLED displejoch
• —Znižuje únavu očí v tmavom prostredí
• —Vyzerá moderne a sofistikovane
• —Umožňuje vyniknúť obsahu

Základné princípy

Nie je to len inverzia

Najväčšia chyba: jednoducho invertovať farby. Dark mode vyžaduje premyslený prístup.

Hierarchia svetlosti

V dark mode funguje hierarchia opačne:

• —Povrchy bližšie k používateľovi = svetlejšie
• —Povrchy ďalej = tmavšie
• —Nikdy nepoužívajte čisto čiernu (#000000)

Odporúčaná základná farba: #121212 alebo podobný tmavý odtieň

Kontrast a prístupnosť

• —Minimálny kontrast textu: 4.5:1 (AA štandard)
• —Vyhnite sa bielemu textu na čiernom pozadí — je príliš kontrastný
• —Používajte off-white: #E0E0E0 alebo #EBEBEB

Farby v dark mode

Primárne farby

Desaturujte primárne farby o 10-20%. Príliš sýte farby v dark mode "žiaria".

Stavové farby

• —Úspech: svetlejšia zelená
• —Chyba: svetlejšia červená
• —Varovanie: oranžová namiesto žltej

Implementácia

CSS premenné

Používajte CSS custom properties pre jednoduchý switch medzi módmi.

Rešpektujte systémové nastavenia

Detekujte používateľovu preferenciu cez prefers-color-scheme media query.

Záver

Dark mode je skvelá funkcia, ale vyžaduje pozornosť k detailom. Testujte na rôznych zariadeniach a v rôznych svetelných podmienkach.