Dark Mode və vizual rahatlıq

1) Niyə qaranlıq mövzu

Aşağı işıqlandırmada göz rahatlığı, daha az parıltı və «işıq flaşları».
Enerji: OLED/AMOLED qaranlıq ekranlar daha az batareya sərf edir.
Məlumatlara diqqət: fonda deyil, məzmuna diqqət yetirin.
İstifadəçi gözləntiləri: sistem bayrağı 'prefers-color-scheme' - de-fakto standartıdır.

2) Prinsiplər

1. Tünd boz fon> UI səthləri üçün təmiz qara (daha yaxşı oxunuş və qradasiya).
2. Məzmun kontrastı: «ağ qara» deyil, uzun mətnlər üçün yumşaq çalarlar.
3. Diqqətli «parlaqlıq»: işıqlar/vurğular səssiz, lakin fərqlidir.
4. Kölgənin ≠ dərinliyi: açıq/bulanıq kölgədə işləyirik, kəskin kontrast deyil.
5. Mövcud: WCAG AA (minimum), görünən fokus və başa düşülən hallar.
6. Sistem parametrləri birincidir: avtomatik keçid və «azalmış hərəkət».

3) Palitralar və tokenlər (nümunə)

json
{
"mode": "dark",
"color": {
"bg": { "base": "#0E1116", "elev1": "#141821", "elev2": "#1A1F2B", "subtle": "#0B0E13" },
"fg": { "primary": "#E6E8EB", "muted": "#A6AEB8", "inverse": "#11131A" },
"accent": { "primary": "#6EA0FF", "warning": "#FFB547", "critical": "#FF6A6A", "success": "#66D19E" },
"border": { "soft": "#2A2F37", "strong": "#3A4150" },
"chart": { "a": "#6EA0FF", "b": "#66D19E", "c": "#FFB547", "d": "#C58CFF", "e": "#7DD3FC" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.35)", "md": "0 6px 18px rgba(0,0,0,.45)" }
}

css
@media (prefers-color-scheme: dark) {
:root {
--bg-base:#0E1116; --bg-elev1:#141821; --bg-elev2:#1A1F2B;
--fg-primary:#E6E8EB; --fg-muted:#A6AEB8;
--accent:#6EA0FF; --warning:#FFB547; --critical:#FF6A6A; --success:#66D19E;
--bd-soft:#2A2F37; --bd-strong:#3A4150;
}
}

• Qaranlıq rejimdə vurğular işıqdan + 8-12% daha açıqdır.
• Böyük sahələr üçün mütləq # 000-dən qaçaraq boz rəngdən (4-5 addım) istifadə edin (istisna - AMOLED rejimi).

4) Mətn və oxunuş

Əsas mətn: açıq boz '#E6E8EB' na '#0E1116' (kontrast ~ 12:1).
İkincil mətn: '#A6AEB8'; İpuçları - bir addım daha tünd/şəffaf.
Uzun oxu: bir az isti çalarlar («halo» azaldır).
Linklər - vurğu + default vurğulama; rəng ≠ mənanın yeganə daşıyıcısı.

5) Səthlər, dərinlik və şüşə

Elevations: `base` → `elev1` → `elev2`; hər qat 2-4% daha yüngül/daha isti.
Kölgələr - yumşaq, geniş, aşağı qeyri-şəffaflıqla; «parlaq» kontur qarşısını almaq.
Translüsent panellər (blur) orta uyğun; substrat ilə mətn kontrastı təmin edin.
Ayırıcılar - «--bd-soft» və ya çətinliklə nəzərə çarpan «heirs» yarımçıq sərhədləri.

6) Hallar və diqqət

Hover: + 2-3% daha yüngül fon; Active: − 2-3% (daha tünd).
Focus: aydın ring (məsələn, 'outline: 2px solid #6EA0FF; outline-offset: 2px; '), aksent düymələrində də görünür.
Disabled: kontrastı diqqətlə azaltın; mətn üçün oxu səviyyəsindən aşağı düşməyin.

7) Düymələr, formalar və cədvəllər

Primary: fon '--accent', mətn '#0E1116'.
Secondary: fon '--bg-elev1', border '-bd-strong', mətn '--fg-primary'.
Giriş sahələri: fon '--bg-elev1', fokus zamanı - vurğu border; placeholder daha tutqun, lakin oxumaq.
Cədvəllər: zebra-fon çətinliklə nəzərə çarpır, hover ilə sətrin seçilməsi + 2-3% daha açıqdır.

8) İllüstrasiyalar, loqotiplər və fotolar

Loqotiplər və piktoqramlar - qaranlıqda inversion versiyalar; doymuş fonda nazik işıq xətlərindən çəkinin.
Şəkil: kontrast başlıqlar üçün qara maska ​ ​ (40-60%) əlavə edin.
Nişanlar: vahid qalınlığı, kontur + doldurma - vəziyyətinə görə, «zəhərli» olmayan rənglər.

9) Qaranlıq mövzuda data-vizuallaşdırma

Sıra rəngləri - orta doyma; minimum 5 fərqli ton.
Torlar və oxlar - səssiz (alfa 20-30%), imzalar - '-fg-muted'.
Şərhlər/hadisələr - parlaq, lakin oxunan; yalnız rənglə deyil, forma/marker ilə vurğulayın.
Boş məlumatlar/laq - ağ sahələr deyil, yumşaq «dumanlar».

10) Performans və batareya

OLED həqiqətən təmiz qara (# 000) qənaət edir - istifadəçi seçimi ilə AMOLED rejimində istifadə edin.
Zəif GPU-da davamlı böyük parıltılardan/blur-dan çəkinin.
'prefers-reduced-motion' -a hörmət edin: animasiyaları/keçidləri asanlaşdırın.

11) Davranış və keçid

Default - 'prefers-color-scheme'.
Istifadəçiyə açıq keçid (Light/Dark/System) verin, seçiminizi saxlayın (cookie/localStorage).
Mövzu dəyişdirildikdə - flaş olmadan: renderdən əvvəl mövzu sinfinin əvvəlcədən əlavə edilməsi.

html
<script>
const saved = localStorage. getItem('theme');
const sysDark = window. matchMedia?.('(prefers-color-scheme: dark)'). matches;
document. documentElement. dataset. theme = saved?? (sysDark? 'dark': 'light');
</script>

12) Mövcudluq (A11y)

Mətnin kontrastı ≥ 4. 5:1 (adi), ≥ 3:1 (böyük).
Vəziyyəti yalnız rənglə kodlamayın: ikon/desen/imza istifadə edin.
Focus stilləri və klaviatura naviqasiyası tələb olunur.
VoiceOver/TalkBack: rollar, etiketlər, tapa sırası.

13) Anti-nümunələr

Böyük ərazilərdə tamamilə qara fonda tamamilə ağ mətn - «titrəmə» və yorğunluq.
Qaranlıq neon vurğu - «işıq səs-küy».
Yüksək kontrast kölgələri (sərt sərhədi olan «qara boz»).
Maskasız fotoda şəffaf mətn.
Yox olan placeholder (çox aşağı alfa).

14) Komponent nümunələri

Düymə

css
.button {
background: var(--accent); color: var(--bg-base);
border-radius: 12px; padding: 10px 16px;
box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.button:hover { filter: brightness(1. 06); }
.button:active { filter: brightness(.94); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

Kart

css
.card {
background: var(--bg-elev1); border: 1px solid var(--bd-soft); border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

15) Test planı

İşıqlandırma: qaranlıq otaq/gün işığı/küçə axşamı.
Cihazlar: OLED və IPS, mobil/masaüstü, müxtəlif sıxlıqlar.
A11y: kontrast çeker, klaviatura keçidi, placeholder's oxunabilirlik.
Qavrayış: ab-test «göz yorğunluğu» və gecə daxil səhvləri.
Performans: Qara mövzu daxil edildikdən sonra RUM metrikası (INP/CLS); GPU yükü (blur/kölgə effektləri).

16) Keyfiyyət metrikası

Contrast Violations/1k elementləri (hədəf: → 0).
Complaint Rate «çox qaranlıq/parlaq».
Night Session Completion (22: 00-06: 00 sessiyaları üzrə davranış metrikası).
INP/CLS p75 Dark Mode vs Light (bazadan pis deyil).
Opt-in Dark Mode və mövzunu seçən istifadəçilərin saxlanması.

17) Başlanğıc çek siyahısı

• 4-5 səth səviyyəli qaranlıq mövzu palitrası
• Mətn/simvol/sərhədlərin kontrastı WCAG AA-ya uyğundur
• Görünən fokus stilləri və halları (hover/active/disabled)
• Loqotiplər/nişanlar/fotoşəkillər uyğunlaşdırılıb, fotoşəkillərə maskalar əlavə edilib
• Qrafiklər - səssiz şəbəkələr, oxunaqlı imzalar, qeyri-zəhərli sıralar
• Light/Dark/System Switch, «flaş» olmadan seçim saxlamaq
• Hörmət 'prefers-color-scheme' və 'prefers-reduced-motion'
• RUM/perf-daşbord, reqressiya alertləri

18) Tətbiq planı (3 iterasiya)

İterasiya 1 - Təməl (1-2 həftə)

Palitralar/tokenlər, əsas səthlər (base/elev1/elev2), mətn/sərhədlər, düymələr/sahələr/cədvəllər, mövzu açarı.

İterasiya 2 - Detallaşdırma (3-4 həftə)

Qaranlıqda qrafika və illüstrasiyalar, fotoşəkildə maskalar, fokus/vəziyyət, reduced-motion, perf-audit nəzərə alınmaqla animasiya.

İterasiya 3 - Optimallaşdırma (davamlı)

AMOLED rejimi kimi seçenək, nazik kontrast konfiqurasiya, gecə istifadəsi testləri, RUM müqayisə Light vs Dark, müntəzəm marka/UX auditləri.

19) Mini-FAQ

Təmiz qara fon etmək?
UI üçün - daha yaxşı dərin tünd boz; təmiz # 000 «AMOLED rejimi» seçimi ilə buraxın.

Vurğuların doymasını artırmaq lazımdırmı?
Qaranlıqda - adətən əksinə, yüngülcə işıqlandırılır və «parıldamamaq» üçün doygunluğu azaldır.

Banner şəkilləri haqqında nə demək olar?
Qara substrat/maska ​ ​ əlavə edin, mətn və loqonun kontrastını yoxlayın.

Yekun

Qaranlıq mövzu rənglərin inversiyası deyil, ayrıca dizayn rejimidir: düşünülmüş palitra, səth səviyyələri, oxunma qabiliyyəti, düzgün vəziyyətlər, uyğunlaşdırılmış qrafiklər və media və sistem parametrlərinə hörmət. Tokenlərə güvənin, kontrast və performansa nəzarət edin - və Dark Mode gecə və gündüz istifadəçiləri üçün rahat, sabit və gözəl bir vasitə olacaq.