Интерфейс темасын өзгөртүү

1) Принциптер

1. Система> скин. Тема жөн эле фон инверсиясы эмес, токендердин жыйындысы (түс, фон, контраст, көлөкө, шарт, иллюстрация, графика).
2. System-first. демейки - System ('prefers-color-scheme') кол менен Light/Dark/High-Contrast тандоо мүмкүнчүлүгү менен.
3. Демейки контраст. Максаты - WCAG AA, майда текст/маанилүү белгилер үчүн - AAA.
4. Эч кандай жарк эткен. Биз теманы рендерге (inline-script) чейин колдонобуз, ал эми өтүүлөрдү кылдаттык менен жасайбыз.
5. бренд туруктуулугу. Статустардын акценттери жана семантикасы бардык темаларда сакталат.

2) Режимдер жана жагдайлар

Light - күндүзгү сценарийлер/төлөм формалары/узак окуу.
Dark - кечинде/төмөн жарык/Live дан; жарык азайтат.
System - ОС/браузерди ('prefers-color-scheme') ээрчип.
High-Contrast - жогорку контраст жана жасалгаларды минималдаштыруу (reduce motion).
Seasonal/Promo (кошумча) - турнир/иш-чара үчүн негизги теманын үстүнө (Токендерди сындырбайт).

3) Токендердин архитектурасы

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

Эреже: компоненттер семантикалык токендерди гана колдонушат.

4) Detector жана тандоо сактоо

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) FOUC жок жылмакай өтүү

CSS (inline скрипт) жүктөп чейин теманы колдонуу.

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

Тиркемени орноткондон кийин' class =" theme-ready"' кошуңуз.

6) компоненттери жана шарттары

Текст/иконалар: контраст ≥ AA; экинчилик текст 4 кем эмес. 5:1 (караңгыда оңой "өчөт").
Талаалар/карталар: фон '--bg-elev', чек '--border', көлөкө '--shadow'.
CTA: фон '--accent', текст карама-каршы ('#fff' же эсептелген).
Шарттар (hover/focus/active/disabled): "асан-үсөндү куюп" эмес, жарыктыгын/альфасын өзгөртүү.
Graphics/sparkline: light/dark үчүн өзүнчө палитра; тор/огу төмөн контрасттуу, бирок окулуучу.

7) Сүрөттөр/медиа/логотип

Монохромдуу иконалар - 'currentColor' аркылуу (текстке ылайыкташтырылган).
Бренд логотибин тескери эмес; эки нускасын даярдоо (жарык/dark).
Плакаттар/скриншоттор: жеңил overlay дарк (8-12%) тексттерди окуу үчүн.
SVG: "катуу" куюп качуу, vars 'var (--fg) '/' var (--accent)' колдонуу.

8) Жеткиликтүүлүк

Жогорку контраст: өзүнчө preset' data-theme =" hc"'.
Focus шакек: ар дайым көрүнүп турат ('outline: 2px solid var (--focus); outline-offset: 2px`).
түс таянган эмес. Статус үчүн сөлөкөт/текст/үлгү.
Шрифттер: 'font-variant-numeric: tabular-nums;' суммалар/коэффициенттер үчүн.
RTL: тема күзгү бузат (логикалык касиеттерин колдонот).

9) Аткаруу

Түстөр - CSS custom properties түбүндө → компоненттерин Rerender жок заматта кайра пайдалануу.
Чоң контейнерлерде 'invert ()' чыпкасы менен сүрөттөрдү "кайра боёодон" качыңыз.
Тема үчүн оор иллюстрацияларды жалкоо алмаштыруу (керек болсо).
Чоң палитраларды JSде сактабаңыз - тема класс/атрибут тарабынан башкарылат.

10) iGaming өзгөчөлүктөрү

Live-коэфф түнкүсүн: "жумшак" карама-каршылык (сандар үчүн AAA), жарыктандыруу өзгөрүү коэффициенти - көзгө көрүнбөгөн, жылтылдаган жок.
Жооптуу оюн: эскертүүлөр жана чакырыктар эки темада тең окулат; "уулуу" гүлдөр жок.
Касса: чарчаган жаркыраган акценти жок талаалар/кол тамгалар/каталар; ийгилик/ката тема боюнча туруктуу.
Турнир "терилери": гана үстүртөн accent-override катары, негизги белгилерин сындырып жок.

11) Сниппет 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) Метрика

Theme adoption rate: Dark/System/HC боюнча колдонуучулардын үлүшү.
FOUC баасы: башталганда көрүнгөн "ак жарк" менен үлүшү (<1%).
Contrast defects: релизи боюнча карама-каршылыктардын саны.
Error visibility: улам ар кандай темалар боюнча "көрүнбөгөн" каталарды чыкылдатуу/кайталоо.
Energy impact (Мобайл): караңгыда сессиянын убактысын салыштыруу vs лайт (кыйыр метрика).

13) Анти-үлгүлөрү

Баарын тескери 'filter: invert (1)' - брендин жана маанисин бузат.
белгилер жок компоненттерин түздөн-түз түстөрдү өзгөртүү.
Караңгы темада фокус шакекти жашыруу.
кара алкагында өтө кара текст (же жарык жарык).
Long transition бүт бетине (түртүп).
"Exclusive" башка эмес, бир темада статусун түстөр.

14) QA-чек тизмеси

Контраст жана окууга жөндөмдүүлүк

• Бардык тексттер ≥ AA; критикалык белгилер/майда текст ≥ AAA.
• Каталар/ийгилик/эскертүүлөр гана түсү менен айырмаланат.

Жүрүм-туруму

• System 'prefers-color-scheme' сыйлайт жана OS өзгөрүшүнө жооп берет.
• FOUC жок (тема рендерге чейин колдонулат).
• Теманы өзгөртүү барактардын абалын өчүрбөйт.

Компоненттер

• Карталар/формалар/таблицалар токендерди гана колдонот.
• Graphics эки тема үчүн палитра бар.
• Логотиптер/иконалар эки темада тең туура көрүнүп турат.

A11y

• Көрүнгөн focus-ring; High-Contrast режими жеткиликтүү.
• 'prefers-reduced-motion' эске алынат.

Аткаруу

• Өтүү ≤ 200 ms; глобалдык reflow жок.
• Контейнерлерде оор чыпкалар/бленддер жок.

15) Дизайн системасында документтер

Theme tokens: палитра, карама-каршылыктар, абалы (hover/focus/active/disabled).
Guides: жаңы бренд акцентин контрасттын регрессисиз кантип кошуу керек.
Charts/Media: жарык/dark үчүн алдын ала курулган палитра.
Patterns: System-first, High-Contrast, FOUC жок жылмакай которуу.
Do/Don 't: чыпкасы инверсия, inline түстөр, көрүнбөгөн каталар/фокус.

Кыскача резюме

Теманын жумушчу которулушу семантикалык токендер + System-first + чексиз башталышы. Контрастты бекитүү, түстөрдү борборлоштуруу, 'prefers-color-scheme' жана reduce-motion сыйлоо, колдонуучунун тандоосун сактоо жана оор таасирлерден качуу. Андан кийин UI ар кандай жагдайда окулуучу жана таанымал бойдон калууда - түнкү Live матчтан күндүзгү кассага жана турнирдик экрандарга чейин.