Интерфейс тақырыбын ауыстыру

1) Қағидаттар

1. > Тері жүйесі. Тақырып - жай ғана фон инверсиясы емес, токендер жиынтығы (түсі, фоны, қарама-қарсылығы, көлеңкелері, жай-күйі, иллюстрациялары, графикасы).
2. System-first. Әдепкі - Light/Dark/High-Contrast бағдарламасын қолмен таңдау мүмкіндігі бар System ('prefers-color-scheme').
3. Әдепкі қарама-қарсылық. Мақсаты - WCAG AA, ұсақ мәтін/маңызды белгілер үшін - AAA.
4. Жарқылдау жоқ. Тақырыпты рендерге (inline-скрипт) дейін қолданамыз, ал өтулерді ұқыпты жасаймыз.
5. Брендтің тұрақтылығы. Мәртебелердің екпіні мен семантикасы барлық тақырыптарда сақталады.

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

Light - күндізгі сценарийлер/төлем нысандары/ұзақ оқу.
Dark - кешкі/төмен жарықтандыру/лайв-матчтар; жарқылдауды азайтады.
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) Детектор және таңдауды сақтау

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): «көгалды құйып» емес, жарықтылықты/альфаны өзгертіңіз.
Графиктер/спарклайндар: light/dark үшін жеке палитралар; төмен контрасты, бірақ оқылатын тор/біліктер.

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

Монохромды иконалар - 'currentColor' арқылы (мәтінге сәйкес келеді).
Бренд логотиптерін өзгертпеңіз; екі нұсқасын дайындаңыз (light/dark).
Постерлер/скриншоттар: жеңіл overlay даркада (8-12%) мәтіндердің оқылуы үшін.
SVG: «қатты» құймаларды болдырмаңыз, 'var (--fg) '/' var (-accent)' варстарын пайдаланыңыз.

8) Қол жетімділік

Жоғары қарама-қарсылық: жеке пресет' data-theme =» hc»'.
Фокус сақинасы: әрқашан көрінетін ('outline: 2px solid var (-focus); outline-offset: 2px`).
Түске сүйенбеңіз. Мәртебелер үшін белгішесі/мәтіні/үлгісі.
Қаріптер: 'font-variant-numeric: tabular-nums;' жиынтықтар/коэффициенттер үшін.
RTL: тақырып айнаны бұзбайды (логикалық қасиеттерді пайдаланамыз).

9) Перформанс

Түстер - CSS custom properties түбірінде → компоненттерді ререндерсіз жылдам қайта пайдалану.
Үлкен контейнерлерде '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 rate: бастау кезінде көрінетін «ақ жарқылдақ» үлесі (<1%).
Contrast defects: шығарылым бойынша қарама-қарсы қателер саны.
Error visibility: түрлі тақырыптағы «көрінбейтін» қателерге байланысты басу/қайталау.
Energy impact (мобайл): даркадағы сессия уақытын салыстыру vs лайт (жанама метрика).

13) Қарсы үлгілер

Барлық 'filter: invert (1)' - бренд мен мағынаны бұзады.
Құрауыштардағы түстерді тікелей өзгертіңіз.
Фокус-сақинаны қараңғы тақырыпта жасыру.
Қараңғы фонда тым қара мәтін (немесе жарықта ашық).
Бүкіл беттің ұзын transition (тежеу).
Бір тақырыптағы басқа тақырыпта жоқ «эксклюзивті» мәртебе түстері.

14) QA-чек парағы

Қарама-қарсылық және оқылушылық

• Барлық мәтіндер ≥ AA; сыни белгілер/ұсақ мәтін ≥ AAA.
• Қателер/сәттілік/ескертулер тек түсімен ғана ерекшеленбейді.

Мінез-құлық

• System 'prefers-color-scheme' -ді құрметтейді және ОС ауысуына жауап береді.
• FOUC жоқ (тақырып рендерге дейін қолданылады).
• Нақышты ауыстырып қосу беттердің күйін қалпына келтірмейді.

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

• Карточкалар/пішіндер/кестелер тек белгілерді пайдаланады.
• Графиктерде екі тақырып үшін палитралар бар.
• Логотиптер/иконалар екі тақырыпта да дұрыс көрінеді.

A11y

• Көрінетін focus-ring; High-Contrast көрінісі қол жетімді.
• 'prefers-reduced-motion' ескеріледі.

Көрініс

• Өту ≤ 200 мс; жаһандық reflow жоқ.
• Контейнерлерде ауыр сүзгілер/бленділер жоқ.

15) Дизайн-жүйедегі құжаттама

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

Қысқаша түйіндеме

Тақырыптың жұмыс ауыстырып қосқышы - семантикалық + System-first + шексіз бастау. Қарама-қайшылықты белгілеңіз, түстерді орталықтандырыңыз, 'prefers-color-scheme' және reduce-motion-ды құрметтеңіз, пайдаланушының таңдауын сақтаңыз және ауыр әсерлерден аулақ болыңыз. Сонда UI кез келген жағдайда - түнгі лайв-матчтан күндізгі касса мен турнирлік экрандарға дейін оқылатын және танылатын болып қалады.