ინტერფეისის შეცვლა

1) პრინციპები

1. სისტემა> კანი. თემა არ არის მხოლოდ ფონის ინვერსია, არამედ ტოქსინების ნაკრები (ფერი, ფონი, კონტრასტი, ჩრდილები, მდგომარეობა, ილუსტრაციები, გრაფიკა).
2. System-first. ნაგულისხმევი - სისტემა ('prefers-color-scheme'), რომელსაც შეუძლია ხელით აირჩიოს Light/Dark/High-Contrast.
3. ნაგულისხმევი კონტრასტი. მიზანია WCAG AA, მცირე ტექსტის/მნიშვნელოვანი ეტიკეტებისთვის - AAA.
4. არ არსებობს ციმციმები. ჩვენ გამოვიყენებთ თემას Render- ზე (inline-script), ხოლო გადასვლები ფრთხილად ვატარებთ.
5. ბრენდის სტაბილურობა. სტატუსის აქცენტები და სემანტიკა ყველა თემაშია დაცული.

2) რეჟიმები და სცენარები

მსუბუქი - დღის სცენარები/გადახდის ფორმები/გრძელი კითხვა.
Dark - საღამო/დაბალი განათება/ლაივ მატჩები; ამცირებს ბლიკებს.
სისტემა - OS/ბრაუზერის შემდეგ ('prefers-color-scheme').
High-Contrast არის გაზრდილი კონტრასტი და დეკორაციების შემცირება (ძირითადად reduce motion).
Seasonal/Promo (სურვილისამებრ) - ძირითადი თემის თავზე ტურნირი/ivent (არ არღვევს ნიშნებს).

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 = "theme-ready" ".

6) კომპონენტები და მდგომარეობა

ტექსტი/ხატები: კონტრასტი AA; მეორადი ტექსტი არ არის დაბალი, ვიდრე 4. 5:1 (ნიჭში ადვილად „ყვავის“).
ველები/ბარათები: ფონ '-bg-elev', საზღვარი '-border', ჩრდილი '-shadow'.
CTA: ფონ '-accent', კონტრასტული ტექსტი ('# fff' ან გაანგარიშებული).
სახელმწიფოები (hover/focus/active/disabled): შეცვალეთ სიკაშკაშე/ალფა და არა „ცისარტყელა“.
გრაფიკა/sparclines: ინდივიდუალური პალიტრა შუქისთვის/საჩუქრისთვის; ბადე/ღერძი დაბალია, მაგრამ კითხვა.

7) სურათები/მედია/ლოგოები

ხატები მონოქრომულია - 'currentColor' - ის მეშვეობით (ადაპტირებულია ტექსტთან).
ნუ ინვერსიული ბრენდის ლოგოები; მოამზადეთ ორი ვერსია (light/dark).
პლაკატები/ეკრანის კადრები: მსუბუქი overlay dark (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 ფესვზე - მყისიერი გადაადგილება კომპონენტების მიმღების გარეშე.
თავიდან აიცილეთ სურათების „ხელახალი შეღებვა“ „ინვერტის () ფილტრებით“ დიდ კონტეინერებზე.
თემისთვის მძიმე ილუსტრაციების ზარმაცი ჩანაცვლება (საჭიროების შემთხვევაში).
არ შეინახოთ დიდი პალიტრები JS- ში - თემას აკონტროლებს კლასი/ატრიბუტი.

10) iGaming სპეციფიკა

ღამით Live-coeffes: „რბილი“ კონტრასტი (AAA ნომრებისთვის), კოეფიციენტის ცვლილების განათება არაკეთილსინდისიერია, ციმციმების გარეშე.
საპასუხისმგებლო თამაში: შეხსენებები და რჩევები იკითხება ორივე თემაში; ღამით „შხამიანი“ ყვავილების გარეშე.
სალარო: ველები/ხელმოწერები/შეცდომები მანათობელი აქცენტების გარეშე; წარმატება/შეცდომა სტაბილურია თემაზე.
ტურნირის „ტყავი“: მხოლოდ როგორც ზედაპირული accent-override, არ დაარღვიოთ ძირითადი ნიშნები.

11) Snippets 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: მომხმარებელთა წილი Dark/System/HC.
FOUC rate: წილი ხილული „თეთრი ადიდებით“ დაწყებისას (<1%).
Contrast defects: განთავისუფლების საწინააღმდეგო შეცდომების რაოდენობა.
Error visibility: კლიშეები/გამეორება სხვადასხვა თემებში „უხილავი“ შეცდომების გამო.
Energy impact (მობილური): სესიის დროის შედარება dark vs clait (არაპირდაპირი მეტრი).

13) ანტი შაბლონები

ინვერტორი (1) "- არღვევს ბრენდს და მნიშვნელობებს.
შეცვალეთ ფერები პირდაპირ კომპონენტებში ტოქსინების გარეშე.
ფოკუსის რგოლების დამალვა ბნელ თემაში.
მუქი ფონზე ძალიან მუქი ტექსტი (ან მსუბუქი მსუბუქი).
გრძელი გადაცემა მთელ გვერდზე (ქვესახეობა).
სტატუსის „ექსკლუზიური“ ფერები ერთ თემაში, რომელიც სხვაში არ არის.

14) QA ჩეკის სია

კონტრასტი და კითხვა

• ყველა ტექსტი AA; კრიტიკული ნიშნები/მცირე ტექსტი AAA.
• შეცდომები/წარმატება/გაფრთხილებები განასხვავებს არა მხოლოდ ფერს.

ქცევა

• სისტემა პატივს სცემს „prefers-color-scheme“ და რეაგირებს OS- ის შეცვლაზე.
• არ არსებობს FOUC (თემა გამოიყენება რენდერამდე).

თემის გადართვა არ ანგრევს გვერდების მდგომარეობას.

კომპონენტები

• ბარათები/ფორმები/ცხრილები გამოიყენება მხოლოდ ნიშნებით.
• გრაფიკას აქვს პალიტრა ორივე თემისთვის.
• ლოგოები/ხატები სწორად ჩანს ორივე თემაში.

A11y

• ხილული focus-ring; მაღალი კონტრასტის რეჟიმი ხელმისაწვდომია.
• გათვალისწინებულია 'prefers-reduced-motion'.

შესრულება

• გადასვლა 200 ms; გლობალური 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 + უკვდავი დასაწყისი. შეადგინეთ კონტრასტი, გააფართოვეთ ფერები, პატივი სცეთ „პრეფერენციულ-ფერადი-სკოლას“ და reduce-motion, შეინახეთ მომხმარებლის არჩევანი და თავიდან აიცილოთ მძიმე ეფექტები. შემდეგ UI რჩება წაკითხული და ცნობადი ნებისმიერ გარემოში - ღამის ლაივ მატჩიდან დაწყებული, დღის სალაროებში და ტურნირის ეკრანებზე.