Тугмаи мавзӯъи интерфейс

1) Принсипҳо

1. Система> пӯст. Мавзӯъ на танҳо тағйири пасзамина, балки маҷмӯи нишонаҳо (ранг, замина, контраст, сояҳо, ҳолатҳо, тасвирҳо, графикҳо) мебошад.
2. Система-аввал. Бо нобаёнӣ - Система ('бартарӣ-ранг-схема') бо қобилияти интихоби дастӣ Light/Dark/High-Contrast.
3. Контрасти пешфарз. Ҳадаф - WCAG AA, барои матни хурд/тамғакоғазҳои муҳим - AAA.
4. Не хуруҷи. Мо мавзӯъро пеш аз пешниҳод (скрипти хаттӣ) татбиқ мекунем ва гузаришҳоро бодиққат анҷом медиҳем.
5. Устувории бренд. Аксентҳо ва семантикаи статусҳо дар ҳама мавзӯъҳо нигоҳ дошта мешаванд.

2) Усулҳо ва сенарияҳо

Скриптҳои рӯзона/варақаҳои пардохт/хониши дароз.
Торик - гугирдҳои шом/нури паст/зинда; дурахшонро кам мекунад.
Система - пайгирии ОС/браузер ('prefers-color-scheme').
Контрасти баланд - контраст ва заргарии камкардашуда (бо назардошти кам кардани ҳаракат).
Мавсимӣ/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) Детектор ва захира кардани интихоб

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 (хати скрипт).

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

Пас аз насб кардани барнома, 'class =' мавзӯъ-тайёр 'илова кунед.

6) Компонентҳо ва давлатҳо

Матн/нишонаҳо: контрасти ≥ АА; матни дуввум на камтар аз 4. 5:1 (ба осонӣ дар торикӣ "пажмурда мешавад").
Майдонҳо/кортҳо: замина '--bg-elev', сарҳад '--border', сояи '--shadow'.
CTA: замина '--accent', матни контраст ('# fff' ё ҳисоб карда шудааст).
Давлатҳо (hover/focus/active/маъюбон): Равшанӣ/алфаро тағир диҳед, на "рангинкамонро дурахшон кунед".
Графика/дурахшон: палитраҳои алоҳида барои сабук/торик; шабака/меҳварҳо фарқияти кам доранд, аммо хондан мумкин аст.

7) Тасвирҳо/ВАО/Логоҳо

Нишонаҳои монохромӣ - ба воситаи 'current' (ба матн мутобиқ кунед).
Логотипҳои брендиро тағир надиҳед; Ду версияро омода кунед (сабук/торик).
Плакатҳо/скриншотҳо: қабати осон дар торик (8-12%) барои хондани матнҳо.
SVG: аз пур кардани "сахт" канорагирӣ кунед, var 'var (--fg) '/' var (--accent)' -ро истифода баред.

8) Дастрасӣ

Муқоисаи баланд: алоҳида' data-theme =" hc"'.
Ҳалқаҳои фокус: ҳамеша намоён ('контур: 2px var сахт (--фокус); нақшаи ҷуброн: 2px ').
Ба ранг такя накунед. Нишона/матн/намуна барои статусҳо.
Ҳуруфҳо: 'ҳуруф-вариант-рақам: ҷадвал-рақамҳо;' барои сумма/омилҳо.
RTL: мавзӯъ оинаҳоро вайрон намекунад (мо хусусиятҳои мантиқиро истифода мебарем).

9) Иҷро

Рангҳо - Хусусиятҳои фармоишии CSS дар решаи → истифодаи фаврӣ бидуни тағир додани ҷузъ.
Нагузоред, ки тасвирҳои "дубора" бо филтрҳои 'invert ()' дар зарфҳои калон.
Иваз кардани танбалии тасвирҳои вазнин ба мавзӯъ (агар лозим бошад).
Палеттаҳои калонро дар JS нигоҳ надоред - мавзӯъ аз ҷониби синф/атрибут идора карда мешавад.

10) Хусусиятҳои IGaming

Омилҳои зинда дар шаб: контрасти "мулоим" (AAA барои рақамҳо), таъкид кардани тағирёбии омил бесамар аст, бидуни ҷилавгирӣ.
Бозии масъул: Ёдраскуниҳо ва дархостҳо дар ҳарду мавзӯъ хонда мешаванд; бе гулҳои "заҳрнок" шабона.
Дафтари қуттӣ: майдонҳо/имзоҳо/хатогиҳо бе аксенти дурахшон; муваффақият/хатогӣ дар мавзӯъ устувор аст.
Мусобиқа "пӯстҳо": танҳо ҳамчун аксенти рӯякӣ, нишонаҳои асосиро вайрон накунед.

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) Метрҳо

Сатҳи қабули мавзӯъ: ҳиссаи корбарон дар Dark/System/HC.
Меъёри FOUC: таносуб бо "пардаи сафед" дар ибтидо (<1%).
Камбудиҳои контраст: шумораи хатогиҳои контраст тавассути озод кардан.
Намоиши хатогӣ: кликҳо/такрориҳо аз сабаби хатогиҳои "ноаён" дар мавзӯъҳои гуногун.
Таъсири энергия (мобилӣ): муқоисаи вақти сессия дар торикии торик (метри ғайримустақим).

13) Анти-намунаҳо

Ҳама 'филтрро иваз кунед: invert (1)' - бренд ва маъноҳоро вайрон мекунад.
Рангҳоро бевосита дар ҷузъҳои бе нишонаҳо иваз кунед.
Пинҳон кардани ҳалқаҳои фокусӣ дар мавзӯи торик.
Матн дар заминаи торик хеле торик аст (ё рӯшноӣ дар заминаи нур).
Гузариши тӯлонӣ ба тамоми саҳифа (сустшавӣ).
Рангҳои ҳолати "истисноӣ" дар як мавзӯъ, ки дар мавзӯи дигар нестанд.

14) Рӯйхати назоратии QA

Муқоиса ва хондан

• Ҳама матнҳои ≥ АА; тамғакоғазҳо/матни хурд ≥ AAA.
• Хатогиҳо/муваффақият/огоҳиҳо на танҳо бо ранг намоён мебошанд.

Рафтор

• Система 'афзалияти ранг-схемаро эҳтиром мекунад ва ба тағироти ОС ҷавоб медиҳад.
• FOUC нест (мавзӯъ пеш аз пешниҳод татбиқ мешавад).
• Иваз кардани мавзӯъ ҳолати саҳифаро барқарор намекунад.

Компонентҳо

• Кортҳо/шаклҳо/ҷадвалҳо танҳо нишонаҳоро истифода мебаранд.
• Графика барои ҳарду мавзӯъ палитра дорад.
• Логоҳо/нишонаҳо дар ҳарду мавзӯъ дуруст намоёнанд.

A11y

• Фокус-ҳалқаи намоён; Ҳолати баланд-контраст дастрас аст.
• Ба назар гиред 'prefers-кам-ҳаракат'.

Иҷро

• Гузариш ≤ 200 мс; бе инъикоси глобалӣ.
• Филтрҳои вазнин/омехта дар зарфҳо нестанд.

15) Ҳуҷҷатгузорӣ дар системаи тарроҳӣ

Нишонаҳои мавзӯъ: палитрҳо, муқоисаҳо, ҳолат (hover/focus/active/маъюбон).
Роҳнамо: Чӣ гуна як аксенти нави brendo-ро бидуни пушаймонӣ илова кардан мумкин аст.
Диаграммаҳо/ВАО: палитрҳои пешакӣ муайяншуда барои сабук/торик.
Намунаҳо: Система-аввал, Контрасти баланд, гузариши ҳамвор бидуни FOUC.
Иҷро накунед/Накунед: инверсияи филтр, рангҳои дохилӣ, хатогиҳои ноаён/фокус.

Хулосаи мухтасар

Тугмаи мавзӯъи корӣ оёти семантикӣ + Система-аввал + оғози дурахшон аст. Гирифтани контраст, мутамарказ кардани рангҳо, эҳтиром 'бартарӣ-ранг-схема' ва кам кардани ҳаракат, интихоби корбар ва пешгирӣ кардани оқибатҳои вазнин. Он гоҳ UI дар ҳама гуна ҳолатҳо қобили хондан ва шинохта боқӣ мемонад - аз бозии шабона то дафтари қуттии рӯзона ва экранҳои мусобиқа.