Dark mode disain: kuidas teha tume režiim, mis töötab

Miks dark mode?

Android UX raport: 81.9% kasutajatest eelistavad dark mode'i. Eelised: - Vähem silmaväsimust (eriti öösel) - Säästab patareid (OLED ekraanid) - Modernsem välimus - Parem fookus

Levinumad vead

1. Puhas must (#000000) Kontrast on liiga kõrge. Kasuta **väga tumedat halli** (#0F0F0F – #1A1A1A).

2. Puhas valge tekst Sama probleem teisipidi. Kasuta off-white (#E5E5E5).

3. Sama saturatsioonis värvid Värvid, mis töötasid valgel, näevad dark mode'is liiga eredad. **Vähenda saturatsiooni** ~20%.

4. Varjud puuduvad Dark mode'is ei tööta box-shadow – kasuta **subtiilseid äärisi** elevation'i tekitamiseks.

5. Pilte ei kohandata Heledad pildid hüppavad välja. Kasuta CSS filter:

@media (prefers-color-scheme: dark) {
  img { filter: brightness(.8) contrast(1.2); }
}

Värvisüsteemi loomine

Surfaces (taustad) ```css --surface-base: #0F0F0F; /* leht */ --surface-1: #1A1A1A; /* kaardid */ --surface-2: #242424; /* tõstetud */ --surface-3: #2E2E2E; /* dialoogid */ ```

Text ```css --text-primary: #FFFFFF; /* 87% opacity */ --text-secondary: #B3B3B3; /* 60% opacity */ --text-disabled: #666666; /* 38% opacity */ ```

Accents Vähenda saturatsiooni vs light mode: ```css /* Light */ --accent: #2DD4BF; /* Dark */ --accent: #5EEAD4; /* heledam, vähem saturatsiooni */ ```

Implementeerimine

CSS muutujatega ```css :root { --bg: #ffffff; --text: #0a0a0a; } [data-theme='dark'] { --bg: #0f0f0f; --text: #e5e5e5; } ```

Süsteemi eelistuse järgi ```css @media (prefers-color-scheme: dark) { :root { --bg: #0f0f0f; --text: #e5e5e5; } } ```

Toggle Salvesta valik localStorage'sse, et külastusi mäletada.

Kontrastinõuded

WCAG AA endiselt kehtib dark mode'is: - Tavatekst: 4.5:1 - Suur tekst: 3:1

Test: WebAIM Contrast Checker.

Komponendid dark mode'is

Nupud - Primary: hele värv tumeda taustal - Secondary: outlined (border + transparent) - Ghost: hover'iga ilmuv

Vormid - Input border: subtle (--surface-2) - Focus state: brand color glow - Placeholder: --text-disabled

Pildid - Vähenda heledust - Suurenda kontrasti - Logo: light variant (valge logo tumedale)

Mobiilis

iOS ja Android peavad dark mode'i juba 5+ aastat. Web peaks vastama: - meta theme-color: dynamic - iOS PWA: status bar style

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">

Testimine

• Chrome DevTools → Rendering → Emulate CSS prefers-color-scheme
• Firefox: about:config
• Päris seadmed (iOS Settings → Display)

Näited Eesti turult

Hästi tehtud dark mode: - Wise - Bolt - Pipedrive

Kokkuvõte

Hea dark mode võtab 30% kogu disainitööst, kuid annab 81% kasutajatele parema kogemuse. Pakume kodulehti dark mode'iga standardvarustusena – küsi pakkumist.

Allikad

• Material Design – Dark Theme
• Apple HIG – Dark Mode
• Web.dev – prefers-color-scheme