Interfeýs mowzugyny üýtgetmek

1) Ýörelgeler

1. Ulgam> skin. Mowzuk diňe bir fon öwrülişigi däl, eýsem bellikler toplumy (reňk, fon, kontrast, kölegeler, ýagdaýlar, suratlar, grafikler).
2. System-first. "Light/Dark/High-Contrast" -y el bilen saýlamak mümkinçiligi bolan "System" ('prefers-color-scheme').
3. Adaty kontrast. Maksat - WCAG AA, kiçi tekst/möhüm bellikler üçin - AAA.
4. Çyralar ýok. Temany renderden öň (inline-script) ulanýarys we geçişleri seresaplylyk bilen ýerine ýetirýäris.
5. Markanyň durnuklylygy. Statuslaryň aksentleri we semantikasy ähli temalarda saklanýar.

2) Reimesimler we ssenariýalar

Light - gündelik ssenariler/töleg görnüşleri/uzak okamak.
Dark - agşam/pes ýagtylyk/durmuş oýunlary; şöhleleri peseldýär.
System - OS/brauzeri yzarlaýarys ('prefers-color-scheme').
"High-Contrast" - şaý-sepleriň kontrastynyň ýokarlanmagy we minimallaşdyrylmagy (reduce motion goşmak bilen).
Seasonal/Promo (goşmaça) - ýaryşyň/çäräniň esasy temasynyň üstünde (bellikleri bozmaýar).

3) Tokenleriň arhitekturasy

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

Düzgün: komponentler diňe semantik bellikleri ulanýarlar.

4) Detektor we saýlamany saklamak

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-siz tekiz geçişler

CSS (inline-script) ýüklemezden ozal mowzugy ulanyň.

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

Programma redaktirlenenden soň 'class =' theme-ready '' goşuň.

6) Komponentler we ýagdaýlar

Tekst/nyşanlar: kontrast ≥ AA; ikinji derejeli tekst 4-den pes bolmaly däldir. 5:1 (darkada aňsatlyk bilen "solýar").
Meýdanlar/kartoçkalar: fon '--bg-elev', serhet '--border', kölege '--shadow'.
CTA: fon '--accent', kontrast ('#fff' ýa-da hasaplanan).
Şertler (hover/focus/active/disabled): ýagtylygy/alfa üýtgediň, "älemgoşary dökmäň".
Grafikler/sparklinler: light/dark üçin aýratyn palitralar; tor/oklar pes kontrastly, ýöne okamaly.

7) Suratlar/Media/Logotipler

Nyşanlar monohrom - 'currentColor' arkaly (tekste uýgunlaşýar).
Marka nyşanlaryny tersine öwürmäň; iki wersiýany (light/dark) taýýarlaň.
Afişalar/skrinshotlar: tekstleriň okalmagy üçin darkadaky ýeňil overlay (8-12%).
SVG: "gaty" doldurgyçlardan gaça duruň, wars 'var (-fg) '/' var (-accent)' ulanyň.

8) Elýeterlilik

Ýokary kontrast: aýratyn preset' data-theme =" hc"'.
Fokus halkalary: elmydama görünýär ('outline: 2px solid var (-focus); outline-offset: 2px`).
Reňke bil baglamaň. Statuslar üçin nyşan/tekst/pattern.
Şriftler: 'font-variant-numeric: tabular-nums;' jemler/koeffisiýentler üçin.
RTL: mowzuk aýnany bozmaýar (logiki häsiýetleri ulanýarys).

9) Çykyş

Reňkler - CSS custom properties kökünde → komponentleri rerender etmezden derrew gaýtadan ulanmak.
Uly konteýnerlerde 'invert ()' süzgüçleri bilen şekilleri "täzeden boýamakdan" gaça duruň.
Mowzuk üçin agyr suratlary ýaltalyk bilen çalyşmak (zerur bolsa).
JS-de uly palitralary saklamaň - mowzuk synp/atribut tarapyndan dolandyrylýar.

10) iGaming aýratynlyklary

Gije Live-koeffisiýentler: "ýumşak" kontrast (sanlar üçin AAA), koeffisiýentiň üýtgemeginiň yşyklandyrylyşy - göze görünmeýän, ýalpyldawuk.
Jogapkär oýun: ýatlatmalar we maslahatlar iki mowzukda hem okalýar; gije "zäherli" reňksiz.
Kassa: ýagty aksentsiz meýdanlar/gollar/ýalňyşlyklar; üstünlik/ýalňyşlyk tema boýunça durnukly.
Ýaryşyň "derileri": diňe ýüzleý accent-override ýaly, esasy bellikleri bozmaň.

11) UI snippetler

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) Metrikler

Theme adoption rate: Dark/System/HC-de ulanyjylaryň paýy.
FOUC rate: başlaýanda görünýän "ak partlama" paýy (<1%).
Contrast defects: reliz boýunça kontrast hatalarynyň sany.
Error visibility: dürli mowzuklarda "görünmeýän" ýalňyşlyklar sebäpli basmak/gaýtalamak.
Energy impact (mobail): darkadaky sessiýanyň wagtyny deňeşdirmek vs laýt (gytaklaýyn metrika).

13) Anti-patternler

Hemme zady tersine öwürmek 'filter: invert (1)' - markany we manylary bozýar.
Belliksiz komponentlerde reňkleri gönüden-göni üýtget.
Fokus halkalaryny garaňky mowzukda gizläň.
Garaňky fonda gaty garaňky tekst (ýa-da ýagty).
Bütin sahypa uzyn transition (tormozlamak).
Bir mowzukdaky statuslaryň başga mowzukda bolmadyk "aýratyn" reňkleri.

14) QA-çek-sanawy

Kontrast we okalmak

• Ähli tekstler ≥ AA; kritiki bellikler/inçe tekst ≥ AAA.
• Ýalňyşlyklar/üstünlik/duýduryşlar diňe reňk bilen tapawutlanmaýar.

Özüni alyp barşy

• System 'prefers-color-scheme' -e hormat goýýar we OS-iň üýtgemegine reaksiýa bildirýär.
• FOUC ýok (mowzuk renderden öň ulanylýar).
• Mowzugy üýtgetmek sahypalaryň ýagdaýyny pozmaýar.

Komponentler

• Kartoçkalar/görnüşler/tablisalar diňe bellikleri ulanýarlar.
• Grafiklerde iki mowzuk üçin palitralar bar.
• Nyşanlar/nyşanlar iki mowzukda hem dogry görünýär.

A11y

• Görünýän focus-ring; "High-Contrast" mody bar.
• 'prefers-reduced-motion' hasaba alynýar.

Çykyş

• Geçiş ≤ 200 ms; global reflow.
• Konteýnerlerde agyr süzgüçler/blend ýok.

15) Dizaýn-ulgamdaky resminamalar

Theme tokens: palitralar, kontrastlar, ýagdaý (hover/focus/active/disabled).
Gollanmalar: kontrast regressi bolmazdan täze marka aksentini nädip goşmaly.
Charts/Media: light/dark üçin öňünden gurlan palitralar.
Patterns: System-first, High-Contrast, FOUC-siz tekiz geçiş.
Do/Don 't: süzgüç, inline reňkler, görünmeýän ýalňyşlyklar/fokus.

Gysgaça gysgaça

Temanyň iş çalşygy semantik bellikler + System-first + manysyz başlangyç. Kontrasty düzüň, reňkleri merkezleşdiriň, 'prefers-color-scheme' we reduce-motion-a hormat goýuň, ulanyjynyň saýlamagyny saklaň we agyr täsirlerden gaça duruň. Şonda UI islendik ýagdaýda - gijeki durmuş oýnundan başlap, gündelik kassa we ýaryş ekranlaryna çenli okalýan we tanalýan bolup galýar.