Interfeys mövzusu açarı

1) Prinsiplər

1. Sistem> skin. Mövzu yalnız fon inversiyası deyil, bir sıra tokenlərdir (rəng, fon, kontrast, kölgə, vəziyyət, illüstrasiyalar, qrafiklər).
2. System-first. Default - Light/Dark/High-Contrast seçmək imkanı olan System ('prefers-color-scheme').
3. Default kontrast. Məqsəd WCAG AA, kiçik mətn/vacib etiketlər üçün - AAA.
4. Heç bir flaş. Mövzunu renderdən əvvəl (inline-script) tətbiq edirik və keçidləri diqqətlə edirik.
5. Marka sabitliyi. Status vurğuları və semantikası bütün mövzularda qorunur.

2) Rejimlər və ssenarilər

Light - gündəlik ssenarilər/ödəniş formaları/uzun oxu.
Dark - axşam/aşağı işıqlandırma/canlı matçlar; parıltıları azaldır.
System - OS/brauzerə ('prefers-color-scheme') əməl edirik.
High-Contrast - artan kontrast və zərgərlik minimallaşdırılması (reduce motion daxil).
Seasonal/Promo (isteğe bağlı) - turnir/tədbir üçün əsas mövzunun üstündə (tokenləri qırmır).

3) Tokenlərin arxitekturası

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

Qayda: Komponentlər yalnız semantik tokenlərdən istifadə edir.

4) Detector və seçim saxlamaq

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 olmadan hamar keçidlər

CSS (inline-script) yükləmədən əvvəl mövzunu tətbiq edin.

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

Tətbiqi bağladıqdan sonra 'class =' theme-ready '' əlavə edin.

6) Komponentlər və şərtlər

Mətn/nişanlar: kontrast ≥ AA; ikincil mətn 4-dən aşağı deyil. 5:1 (qarkada asanlıqla «solur»).
Sahələr/kartlar: fon '--bg-elev', sərhəd '--border', kölgə '--shadow'.
CTA: fon '--accent', kontrast mətn ('#fff' və ya hesablanabilir).
Hallar (hover/focus/active/disabled): parlaqlığı/alfa dəyişdirin və «göy qurşağı tökməyin».
Qrafik/sparkline: light/dark üçün ayrı palitralar; tor/oxlar aşağı kontrastlı, lakin oxunaqlı.

7) Şəkillər/media/loqotiplər

Monoxrom nişanlar - 'currentColor' vasitəsilə (mətnə uyğunlaşdırılır).
Marka loqotipləri tərs deyil; iki versiyasını hazırlayın (light/dark).
Afişalar/ekran görüntüləri: mətn oxuculuğu üçün dark (8-12%) yüngül overlay.
SVG: «sərt» doldurmalardan çəkinin, vars 'var (--fg) '/' var (-accent)' istifadə edin.

8) Mövcudluq

Yüksək kontrast: ayrı bir preset' data-theme =» hc»'.
Focus ring: həmişə görünür ('outline: 2px solid var (-focus); outline-offset: 2px`).
Rəngə güvənməyin. Statuslar üçün ikona/mətn/model.
Şriftlər: 'font-variant-numeric: tabular-nums;' üçün.
RTL: Mövzu güzgüləri pozmur (məntiqi xüsusiyyətlərdən istifadə edirik).

9) Performans

Rənglər - CSS custom properties kökündə → komponentlərin rerenderi olmadan ani təkrar istifadə.
Böyük konteynerlərdə 'invert ()' filtrləri ilə şəkillərin «yenidən rənglənməsindən» çəkinin.
Mövzu üçün ağır illüstrasiyaların tənbəl dəyişdirilməsi (lazım olduqda).
Böyük paletləri JS-də saxlamayın - mövzu sinif/atribut tərəfindən idarə olunur.

10) iGaming xüsusiyyətləri

Gecə Live-koeffitsientlər: «yumşaq» kontrast (ədədlər üçün AAA), faktor dəyişikliyinin işıqlandırılması - gözə çarpmayan, titrəməyən.
Məsuliyyətli oyun: hər iki mövzuda xatırlatmalar və ipuçları oxunur; gecə «zəhərli» rənglər olmadan.
Kassa: yorucu parlaq vurğu olmadan sahələr/imzalar/səhvlər; uğur/səhv mövzu sabit.
Turnir «kaplamalar»: yalnız səthi accent-override kimi, əsas tokenləri sındırmayın.

11) Snippet 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-də istifadəçilərin payı.
FOUC rate: başlanğıcda görünən «ağ sıçrayış» ilə pay (<1%).
Contrast defects: Release kontrast baqların sayı.
Error visibility: müxtəlif mövzularda «görünməz» səhvlərə görə klik/təkrarlama.
Energy impact (Mobile): Dark vs Lay (Dolayı Metrika) seans vaxt müqayisə.

13) Anti-nümunələr

Hər şeyi çevirmək 'filter: invert (1)' - marka və mənaları pozur.
Tokensiz komponentlərdə birbaşa rəngləri dəyişdirin.
Qaranlıq mövzuda fokus halqaları gizlətmək.
Qaranlıq fonda çox tünd mətn (və ya işıqda yüngül).
Bütün səhifəyə uzun transition (tormozlama).
«Eksklüziv» digər mövzuda olmayan status rəngləri.

14) QA-çek siyahısı

Kontrast və oxunma

• Bütün mətnlər ≥ AA; kritik etiketlər/kiçik mətn ≥ AAA.
• Səhvlər/müvəffəqiyyət/xəbərdarlıqlar yalnız rəngdə deyil.

Davranış

• System 'prefers-color-scheme' hörmət edir və OS dəyişikliyinə cavab verir.
• FOUC yoxdur (mövzu renderdən əvvəl tətbiq olunur).
• Mövzu dəyişdirilməsi səhifələrin vəziyyətini sıfırlamır.

Komponentlər

• Kartlar/formalar/cədvəllər yalnız tokenlərdən istifadə edir.
• Qrafiklərin hər iki mövzu üçün palitraları var.
• Loqotiplər/nişanlar hər iki mövzuda düzgün görünür.

A11y

• Görünən focus-ring; High-Contrast rejimi mövcuddur.
• 'prefers-reduced-motion' nəzərə alınır.

Performans

• Keçid ≤ 200 ms; qlobal reflow olmadan.
• Konteynerlərdə ağır filtrlər/blendlər yoxdur.

15) Dizayn sistemində sənədləşmə

Theme tokens: paletlər, təzadlar, vəziyyət (hover/focus/active/disabled).
Guides: Təzadın reqressiyası olmadan yeni marka vurğusunu necə əlavə etmək olar.
Charts/Media: light/dark üçün əvvəlcədən hazırlanmış palitralar.
Patterns: System-first, High-Contrast, FOUC olmadan hamar keçid.
Do/Don 't: filtr invertasiyası, inline rənglər, görünməz səhvlər/fokus.

Qısa xülasə

İş mövzusu açarı semantik + System-first + sonsuz başlanğıcdır. Kontrastı düzəldin, rəngləri mərkəzləşdirin, 'prefers-color-scheme' və reduce-motion-a hörmət edin, istifadəçi seçimini saxlayın və ağır təsirlərdən çəkinin. Sonra UI hər hansı bir mühitdə oxunaqlı və tanınan olaraq qalır - gecə həyat matçından gündüz kassasına və turnir ekranlarına qədər.