Interfeys mavzusini oʻzgartirish

1) Qonunning

1. Tizim> skin. Mavzu shunchaki fon inversiyasi emas, balki tokenlar to’plami (rang, fon, kontrast, soyalar, holatlar, rasmlar, grafiklar).
2. System-first. Andoza usuli - System (’prefers-color-scheme’) boʻlib, Light/Dark/High-Contrastni qoʻlda tanlash imkoniyati mavjud.
3. Andoza kontrast. Maqsad - WCAG AA, kichik matn/muhim belgilar uchun - AAA.
4. Hech qanday chiroq yo’q. Mavzuni rendergacha (inline-skript) qoʻllaymiz va oʻtishlarni ehtiyotkorlik bilan bajaramiz.
5. Brendning barqarorligi. Barcha mavzularda maqomlarning urgʻu va semantikasi saqlanib qolmoqda.

2) Rejim va ssenariylar

Light - kunduzgi stsenariylar/to’lov shakllari/uzoq o’qish.
Dark - oqshom/past yorug’lik/hayot o’yinlari; yorqinlikni kamaytiradi.
System - OS/brauzerga (’prefers-color-scheme’) amal qiling.
High-Contrast - yuqori kontrast va bezaklarni minimallashtirish (shu jumladan reduce motion).
Seasonal/Promo (ixtiyoriy) - turnir/event uchun asosiy mavzu ustiga (tokenlarni buzmaydi).

3) Tokenlar arxitekturasi

css
:root {
/ semantics/
--bg:    hsl(0 0% 99%);
--bg-elev:  hsl(0 0% 100%);
--fg:    hsl(220 15% 15%);
--muted:   hsl(220 10% 45%);
--accent: hsl (260 95% 60%) ;/brand accent/
--success:  hsl(152 55% 40%);
--warning:  hsl(36 85% 45%);
--danger:  hsl(0 75% 50%);
--border:  hsl(220 10% 90%);
--focus:   hsl(260 95% 60% /.6);
--shadow:  0 6px 24px hsl(220 20% 10% /.08);

/ typography/radii/
--radius: 12px;
--lh: 1. 4;
}
:root[data-theme="dark"]{
--bg:   hsl(220 18% 10%);
--bg-elev: hsl(220 18% 14%);
--fg:   hsl(0 0% 96%);
--muted:  hsl(220 10% 70%);
--accent: hsl (260 95% 65%) ;/slightly lighter in the dark/
--border: hsl(220 14% 22%);
--shadow: 0 8px 28px hsl(220 50% 2% /.6);
}
:root[data-theme="hc"]{
/ high-contrast: simple pairs, high Lc/
--bg: #000; --bg-elev:#000; --fg:#fff; --muted:#fff;
--accent:#00E; --success:#0F0; --warning:#FF0; --danger:#F00;
--border:#fff; --focus:#0FF;
}

Qoida: komponentlar faqat semantik tokenlardan foydalanadi.

4) Detektor va tanlovni saqlash

html
<script>
(function(){
const saved = localStorage. getItem('theme'); // 'light'    'dark'    'hc'    'system'    null const sys = window. matchMedia('(prefers-color-scheme: dark)'). matches? 'dark': 'light';
const theme = saved && saved!=='system'? saved: sys;
document. documentElement. setAttribute('data-theme', theme);
})();
</script>

js matchMedia('(prefers-color-scheme: dark)'). addEventListener('change', e=>{
if(localStorage. getItem('theme')==='system'){
document. documentElement. setAttribute('data-theme', e. matches? 'dark': 'light');
}
});

5) FOUCsiz silliq o’tish joylari

CSS (inline skript) ni yuklashdan oldin mavzuni qoʻllang.

css
@media (prefers-reduced-motion: no-preference){
html. theme-ready { transition: color. 18s, background-color. 18s, border-color. 18s; }
}

Ilovani oʻrnatgandan soʻng,’class =’theme-ready’qoʻshing.

6) Komponentlar va holatlar

Matn/ikonkalar: kontrast ≥ AA; ikkilamchi matn kamida 4. 5:1 (darkada osongina «solib ketadi»).
Dala/kartochkalar: fon’--bg-elev’, chegara’-border’, soya’-shadow’.
CTA: fon’--accent’, matn kontrastli (’#fff’yoki hisoblanadigan).
Holatlar (hover/focus/active/disabled): «qisqichbaqani» emas, balki yorqinlikni/alfani oʻzgartiring.
Grafiklar/sparklaynlar: light/dark uchun alohida palitralar; tor/o’qlar past kontrastli, ammo o’qishga yaroqli.

7) Rasmlar/media/logotiplar

Monoxrom ikonkalar’currentColor’orqali (matnga moslashadi).
Brend logotiplarini o’zgartirmang; ikkita versiyani tayyorlang (light/dark).
Poster/skrinshotlar: yorqin overlay darkada (8-12%) matnlarni o’qish uchun.
SVG: «qattiq» toʻldirishdan qoching, vars’var (-fg) ’/’ var (-accent)’dan foydalaning.

8) Foydalanish imkoniyati

Yuqori kontrast: alohida preset’data-theme = "hc’’.
Fokus halqa: har doim koʻrinadi (’outline: 2px solid var (-focus); outline-offset: 2px`).
Rangga tayanmang. Maqom uchun belgi/matn/pattern.
Shriftlar:’font-variant-numeric: tabular-nums;’summalar/koeffitsiyentlar uchun.
RTL: mavzu oynani buzmaydi (mantiqiy xususiyatlardan foydalanamiz).

9) Spektakl

Ranglar - CSS custom properties tubdan → komponentlarni rerender qilmasdan bir zumda qayta foydalanish.
Rasmlarni katta konteynerlarda’invert ()’filterlari bilan qayta boʻyashdan qoching.
Mavzu uchun ogʻir rasmlarni almashtirish (agar kerak boʻlsa).
Katta palitralarni JSda saqlamang - mavzu sinf/atribut tomonidan boshqariladi.

10) iGaming xususiyatlari

Kechasi Live-koeffitsiyentlar: «yumshoq» kontrast (sonlar uchun AAA), koeffitsient o’zgarishini yoritish - ko’zga ko’rinmas, miltillamay.
Mas’uliyatli o’yin: eslatmalar va maslahatlar ikkala mavzuda ham o’qilishi mumkin; Kechasi «zaharli» gullarsiz.
Kassa: maydonlar/imzolar/charchatuvchi yorqin aksentlarsiz xatolar; muvaffaqiyat/xato mavzu boʻyicha barqaror.
Turnir «terilari»: faqat sirtqi accent-override sifatida bazaviy tokenlarni buzmang.

11) Snippetlar UI

html
<label class="theme-switch">
<span> Topic </span>
<select id="theme">
<option value = "system "> System </option>
<option value = "light "> Bright </option>
<option value = "dark "> Dark </option>
<option value = "hc"> High contrast </option>
</select>
</label>
<script>
const sel = document. getElementById('theme');
sel. value = localStorage. getItem('theme')          'system';
sel. addEventListener('change', e=>{
const v = e. target. value;
localStorage. setItem('theme', v);
if(v==='system'){
const sys = matchMedia('(prefers-color-scheme: dark)'). matches? 'dark':'light';
document. documentElement. setAttribute('data-theme', sys);
} else {
document. documentElement. setAttribute('data-theme', v);
}
});
</script>

css
.btn{height:44px; padding:0 16px; border-radius:var(--radius); display:inline-flex; align-items:center; gap:8px}
.btn--primary{background:var(--accent); color:#fff}
.card{background:var(--bg-elev); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:var(--radius)}
.text-muted{color:var(--muted)}

tsx import { useEffect, useState } from 'react';
type Theme = 'light'    'dark'    'hc'    'system';
export function useTheme(){
const [theme, setTheme] = useState<Theme>(()=>localStorage. getItem('theme') as Theme          'system');
useEffect(()=>{
const apply = (t:Theme)=>{
const v = t==='system'? (matchMedia('(prefers-color-scheme: dark)'). matches? 'dark':'light'): t;
document. documentElement. setAttribute('data-theme', v);
};
apply(theme);
const mql = matchMedia('(prefers-color-scheme: dark)');
const on = ()=> theme==='system' && apply('system');
mql. addEventListener('change', on);
return ()=> mql. removeEventListener('change', on);
},[theme]);
useEffect(()=> localStorage. setItem('theme', theme),[theme]);
return { theme, setTheme };
}

12) Metrika

Theme adoption rate: Dark/System/HC’dagi foydalanuvchilar ulushi.
FOUC rate: Boshlanganda koʻrinadigan «oq shov-shuv» ulushi (<1%).
Contrast defects: reliz boʻyicha kontrastlar soni.
Error visibility: turli mavzularda «sezilmaydigan» xatolar tufayli bosish/takrorlash.
Energy impact (mobayl): dark vs laytdagi sessiya vaqtini taqqoslash (bilvosita metrika).

13) Anti-patternlar

Hamma’filter: invert (1)’ni oʻzgartirish - brend va maʼnolarni buzadi.
Ranglarni to’g’ridan-to’g’ri tarkibiy qismlarda tokensiz o’zgartirish.
Fokus halqasini qorong’u mavzuda yashirish.
Qorong’i fonda juda qorong’i matn (yoki yorug’da och).
Butun sahifaga uzun transition (tormozlash).
Bir mavzudagi boshqa mavzudagi «eksklyuziv» ranglar.

14) QA-chek-varag’i

Kontrast va o’qish

• Barcha matnlar ≥ AA; tanqidiy belgilar/kichik matn ≥ AAA.
• Xatolar/muvaffaqiyatlar/ogohlantirishlar faqat rangda emas.

Xulq-atvori

• System’prefers-color-scheme’ni hurmat qiladi va OS o’zgarishiga munosabat bildiradi.
• FOUC yoʻq (mavzu renderdan oldin qoʻllaniladi).
• Mavzuni oʻzgartirish sahifalarning holatini oʻzgartirmaydi.

Komponentlar

• Kartochkalar/shakllar/jadvallar faqat tokenlardan foydalanadi.
• Grafiklarda ikkala mavzu uchun palitralar mavjud.
• Logotiplar/ikonkalar ikkala mavzuda ham to’g’ri ko’rinadi.

A11y

• Koʻrinadigan focus-ring; High-Contrast rejimi mavjud.
• ’prefers-reduced-motion’hisobga olinadi.

Spektakl

• O’tish ≤ 200 ms; global reflow.
• Konteynerlarda ogʻir filtrlar/blendlar yoʻq.

15) Dizayn-tizimdagi hujjatlar

Theme tokens: palitralar, kontrastlar, holat (hover/focus/active/disabled).
Guides: kontrast regressiyasiz yangi brend-urg’uni qanday qo’shish kerak.
Charts/Media: light/dark uchun oldindan qurilgan palitralar.
Patterns: System-first, High-Contrast, FOUCsiz silliq o’zgartirish.
Do/Don’t: filtr inversiyasi, inline ranglar, koʻrinmas xatolar/fokus.

Qisqacha xulosa

Mavzuni ishga tushirish + System-first + semantik tokenlar. Kontrastni aniqlang, ranglarni markazlashtiring,’prefers-color-scheme’va reduce-motion-ni hurmat qiling, foydalanuvchi tanlovini saqlang va og’ir ta’sirlardan saqlaning. Shunda UI har qanday vaziyatda o’qish va tanish bo’lib qoladi - tungi hayot o’yinidan kunduzgi kassa va turnir ekranlarigacha.