Dark Mode va vizual qulaylik

1) Nima uchun qorong’u mavzu

Past yorug’likda ko’z qulayligi, yorug’lik va yorug’lik yoritgichlari kamroq.
Energiya: OLED/AMOLED qorong’i ekranlarda batareyalar kamroq sarflanadi.
Fonda emas, kontentga eʼtibor qarating.
Foydalanuvchining umidlari: tizim bayrogʻi’prefers-color-scheme’- de-fakto standarti.

2) Qonunning

1. To’q kulrang fon> sof qora (yaxshiroq o’qish va gradatsiya).
2. Kontent bo’yicha kontrast: «oq qora» emas, balki uzun matnlar uchun yumshoq ranglar.
3. Ehtiyotkorlik bilan «yorqinlik»: chiroqlar/urg’ular yumshoq, ammo farqlanadi.
4. ≠ soyaning chuqurligi: o’tkir kontrast emas, yorug ’/xiralashgan soyada ishlaymiz.
5. Foydalanish imkoniyati: WCAG AA (minimal), koʻrinadigan fokus va tushunarli holatlar.
6. Tizim sozlamalari birlamchi: avto-almashtirish va «harakatlanish kamaygan».

3) Palitra va tokenlar (misol)

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;
}
}

• Qorong’i rejimda aksentlar yorug’idan + 8-12% yorqinroq.
• Katta maydonlar uchun mutlaq # 000 dan qochish uchun kulrang gradatsiyadan (4-5 qadam) foydalaning (AMOLED rejimi bundan mustasno).

4) Matn va o’qish qobiliyati

Asosiy matn: och kulrang’#E6E8EB’na’#0E1116’(kontrast ~ 12:1).
Ikkilamchi matn:’#A6AEB8’; maslahatlar - yana bir qadam qorong’i/shaffof.
Uzoq o’qish: biroz iliq ranglar («halo» ni kamaytiradi).
Havolalar - urg’u + andoza chiziq; rang ≠ maʼnoning yagona manbai.

5) Sirtlar, chuqurlik va shisha

Elevations: `base` → `elev1` → `elev2`; har bir qatlam 2-4% yorqinroq/issiqroq.
Soyalar - yumshoq, keng, shaffofligi past; «yorqin» hiyla-nayranglardan qochish.
Translutsent panellar (blur) o’rtacha; matn kontrastini substrat bilan taʼminlang.
Ajratuvchilar -’-bd-soft’ning yarim qorong’i chegaralari yoki zo’rg’a ko’rinadigan «xeyrlar».

6) Holatlar va fokus

Hover: + 2-3% yorqinroq fon; Active: − 2-3% (quyuqroq).
Focus: aniq halqa (masalan,’outline: 2px solid #6EA0FF; outline-offset: 2px;’), aksent tugmalarida ham ko’rinadi.
Disabled: kontrastni ehtiyotkorlik bilan pasaytiring; matn uchun oʻqish darajasidan pastga tushmang.

7) Tugmalar, shakllar va jadvallar

Primary: fon’--accent’, matn’#0E1116’.
Secondary: fon’--bg-elev1’, border’-bd-strong’, matn’--fg-primary’.
Kirish maydonlari: fon’-bg-elev1’, fokusda - aksent border; placeholder xira, lekin o’qiymiz.
Jadvallar: zebra fonlari zo’rg’a ko’rinadi, hoverda satr tanlanishi + 2-3% yorqinroq.

8) Rasmlar, logotiplar va fotosuratlar

Logotiplar va piktogrammalar - qorong’u rangdagi inversion versiyalar; to’yingan fonlardagi nozik yorqin chiziqlardan qoching.
Rasm: qarama-qarshi sarlavhalar uchun qora niqob (40-60%) qo’shing.
Ikonkalar: yagona qalinlik, kontur + to’ldirish - holatiga ko’ra, «zaharli» bo’lmagan ranglar.

9) Qorong’u mavzudagi ma’lumotlar-vizualizatsiya

Qator ranglari - mo "tadil to’yinganlik; kamida 5 ta farqlanuvchi tonlar.
To’rlar va o’qlar - jim (alfa 20-30%), imzolar -’-fg-muted’.
Izohlar/hodisalar - yorqin, lekin o’qish mumkin; faqat rang bilan emas, shakl/marker bilan chizish.
Boʻsh maʼlumot/lag - oq maydon emas, balki yumshoq «tuman».

10) Unumdorlik va batareya

OLED haqiqatan ham sof qora (# 000) ni tejaydi - foydalanuvchi opsiyasi boʻyicha AMOLED rejimida foydalaning.
Zaif GPUlarda katta yorug’lik/porlashdan saqlaning.
’prefers-reduced-motion’ ni hurmat qiling: animatsiyalarni/oʻtishlarni soddalashtiring.

11) Xulq-atvor va o’zgartirish

Andoza’prefers-color-scheme’.
Foydalanuvchiga aniq kalitni (Light/Dark/System) bering, tanlashni saqlang (cookie/localStorage).
Mavzu almashtirilganda - yoritilmasdan: mavzu sinfini rendergacha oldindan qoʻshish.

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) Foydalanish imkoniyati (A11y)

Matn kontrasti ≥ 4. 5:1 (oddiy), ≥ 3:1 (yirik).
Holatni faqat rang bilan kodlamang: belgidan/pattern/imzodan foydalaning.
Fokus uslublari va klaviatura navigatsiyasi - majburiy.
VoiceOver/TalkBack: rollar, yorliqlar, tovon navbati.

13) Anti-patternlar

Katta maydonlardagi qora fonda mutlaqo oq matn - «miltillash» va charchoq.
Qorong’i rangdagi neon urg’ulari - «yorug’lik shovqini».
Yuqori kontrastli soyalar (qattiq chegarali «qora rangdagi kulrang»).
Rasmda niqobsiz shaffof matn.
Yoʻqolib borayotgan placeholder (juda past alfa).

14) Komponent namunalari

Tugma

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; }

Kartochka

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-reja

Yoritish: qorong’i xona/kunduzgi yorug’lik/ko’cha oqshomi.
Qurilmalar: OLED va IPS, mobil/ish stoli, turli zichliklar.
A11y: kontrast-cheker, klaviatura o’tish joyi, placeholder’larning o’qish qobiliyati.
Idrok etish: ab-test «ko’z charchashi» va tunda kiritish xatolari.
Perfomans: qorong’u mavzu kiritilgandan so’ng RUM-metrika (INP/CLS); GPU yuklamasi (blur/soya effektlari).

16) Sifat metrikasi

Contrast Violations/1k elementlari (maqsad: → 0).
Complaint Rate «juda qorong’i/yorqin».
Night Session Completion (22: 00-06: 00 sessiyalari bo’yicha xulq-atvor metrikasi).
INP/CLS p75 in Dark Mode vs Light (bazadan kam emas).
Opt-in Dark Mode va mavzuni tanlagan foydalanuvchilarni ushlab turish.

17) Ishga tushirish chek-varag’i

• 4-5 darajali qorong’i mavzu palitrasi
• Matn/belgi/chegaralar kontrasti WCAG AA
• Koʻrinadigan fokus uslublari va holatlari (hover/active/disabled)
• Logotiplar/piktogrammalar/fotosuratlar moslashtirilgan, fotosuratga niqoblar qo’shilgan
• Grafiklar - bo’g "in to’rlar, o’qish mumkin bo’lgan imzolar," zaharli "qatorlar
• Light/Dark/System tugmasi, tanlashni «chaqnashsiz» saqlash
• Hurmat’prefers-color-scheme’va’prefers-reduced-motion ’
• RUM/perf-dashbord, regressiya bo’yicha alertlar

18) Joriy etish rejasi (3 ta iteratsiya)

Iteratsiya 1 - Poydevor (1-2 hafta)

Palitra/tokenlar, asosiy sirtlar (base/elev1/elev2), matn/chegaralar, tugmalar/maydonlar/jadvallar, mavzu almashtirgichlari.

Iteratsiya 2 - Tafsilotlar (3-4 hafta)

Qorong’i rangdagi grafika va rasmlar, fotosuratdagi niqoblar, fokus/holatlar, reduced-motion hisobga olingan animatsiyalar, perf-audit.

Iteratsiya 3 - Optimallashtirish (uzluksiz)

AMOLED rejimi opsiya sifatida, kontrastlarni nozik sozlash, kechasi foydalanuvchanlik testlari, Light vs Dark RUM taqqoslash, muntazam brend/UX auditlari.

19) Mini-FAQ

Sof qora fon yaratiladimi?
UI uchun - chuqur to’q kulrang yaxshiroq; toza # 000 «AMOLED rejimi» opsiyasi bilan qoldiriladi.

Eʼtiborni kuchaytirish kerakmi?
Qorong’ida esa, aksincha, ozgina yoritiladi va «yoritilmasligi» uchun toʻyinishni kamaytiradi.

Banner tasvirlari haqida nima deyish mumkin?
Qorong’i substrat/niqob qo’shing, matn va logotipning kontrastini tekshiring.

Jami

Qorong’u mavzu - ranglarning inversiyasi emas, balki alohida dizayn-rejim: puxta o’ylangan palitra, sirt sathi, o’qish qobiliyati, to’g’ri holatlar, moslashtirilgan grafika va media, shuningdek tizim sozlamalarini hurmat qilish. Tokenlarga tayaning, kontrast va spektaklni nazorat qiling - va Dark Mode tungi va kunduzgi foydalanuvchilar uchun qulay, barqaror va chiroyli vositaga aylanadi.