Comută tema interfeței

1) Principii

1. Sistem> piele. Tema nu este doar o inversiune de fundal, ci un set de jetoane (culoare, fundal, contrast, umbre, stări, ilustrații, grafice).
2. Sistemul mai întâi. Implicit - Sistem ('preferă schema de culori') cu posibilitatea de a selecta manual Light/Dark/High-Contrast.
3. Contrast implicit. Target - WCAG AA, pentru text mic/etichete importante - AAA.
4. Fără focare. Aplicăm tema înainte de redare (inline script) și facem tranzițiile cu atenție.
5. Stabilitatea mărcii. Accentele și semantica statutelor sunt păstrate în toate subiectele.

2) Moduri și scenarii

Scripturi ușoare/formulare de plată/citire lungă.
Întuneric - seara/lumină scăzută/meciuri live; reduce strălucirea.
Sistem - urmați sistemul de operare/browser („preferă schema de culori”).
Contrast ridicat - contrast crescut și bijuterii minimizate (inclusiv reducerea mișcării).
Sezon/Promo (opțional) - peste tema de bază pentru turneu/eveniment (nu rupe jetoane).

3) Arhitectura token

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

Regulă: Componentele folosesc numai jetoane semantice.

4) Detector și salvați selecția

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) tranziții netede fără FOUC

Aplicați tema înainte de a încărca CSS (inline script).

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

După montarea aplicației, adăugați 'class =' theme-ready ''.

6) Componente și stări

Text/pictograme: contrast ≥ AA; textul secundar nu mai mic de 4. 5:1 (ușor „dispare” în întuneric).
Câmpuri/carduri: fundal „--bg-elev”, frontieră „--border”, umbră „--shadow”.
CTA: fundal '--accent', text de contrast ('# fff' sau calculat).
Stări (hover/focus/active/disabled): Schimbați luminozitatea/alfa, nu „străluciți curcubeul”.
Grafică/scântei: palete separate pentru lumină/întuneric; grila/axele sunt de contrast scăzut, dar ușor de citit.

7) Imagini/Media/Logos

Pictograme monocrome - prin „currentColor” (ajustare la text).
Nu inversa logo-urile mărcii; Pregătiți două versiuni (lumină/întuneric).
Postere/capturi de ecran: suprapunere ușoară în întuneric (8-12%) pentru lizibilitatea textelor.
SVG: evitați umplerile „dure”, utilizați var „var (--fg) ”/„ var (--accent)”.

8) Accesibilitate

Contrast ridicat: presetare separată” data-theme =” hc'.
Inele de focalizare: întotdeauna vizibile ("contur: 2px var solid (--focus); contur-decalaj: 2px ').
Nu te baza pe culoare. Pictogramă/text/tipar pentru stări.
Fonturi: 'font-variant-numeric: tabular-nums;' pentru sume/factori.
RTL: tema nu rupe oglindirea (folosim proprietăți logice).

9) Performanță

Culori - proprietăți personalizate CSS la rădăcină → reutilizare instantanee fără redenumirea componentelor.
Evitați „revopsirea” imaginilor cu filtre „inversate ()” pe containere mari.
Înlocuirea leneș de ilustrații grele pentru tema (dacă este necesar).
Nu stocați palete mari în JS - tema este controlată de clasă/atribut.

10) Specificul iGaming

Factorii vii pe timp de noapte: contrastul „moale” (AAA pentru numere), evidențiind modificarea factorului este discret, fără a pâlpâi.
Joc responsabil: Memento-urile și solicitările pot fi citite în ambele teme; fără flori „otrăvitoare” noaptea.
Box office: câmpuri/semnături/erori fără accente strălucitoare obositoare; succesul/eroarea sunt stabile pe subiect.
Turnee „piei”: numai ca superficiale accent-suprascrie, nu rupe jetoane de bază.

11) Fragmente 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) Măsurători

Rata de adoptare a temei: cota de utilizatori pe Dark/System/HC.
Rata FOUC: proporție cu „explozie albă” vizibilă la început (<1%).
Defecte de contrast: numărul de bug-uri de contrast prin eliberare.
Vizibilitate eroare: clicuri/repetiții din cauza erorilor „invizibile” în diferite subiecte.
Impactul energetic (mobil): compararea timpului de sesiune în întuneric vs lait (metric indirect).

13) Anti-modele

Invertiți tot „filtru: inversați (1)” - rupe marca și semnificațiile.
Schimbați culorile direct în componente fără jetoane.
Ascunde inele de focalizare într-o temă întunecată.
Textul este prea întunecat pe un fundal întunecat (sau lumină pe un fundal luminos).
Tranziție lungă la întreaga pagină (încetiniri).
Culorile de stare „exclusive” într-un subiect care nu este în altul.

14) Lista de verificare QA

Contrast și lizibilitate

• Toate textele ≥ AA; etichete critice/text mic ≥ AAA.
• Erorile/succesul/avertismentele nu sunt doar de culoare.

Comportament

• Sistemul respectă preferă-schema de culori 'și răspunde la modificările sistemului de operare.
• No FOUC (tema se aplică înainte de randare).
• Schimbarea temei nu resetează starea paginii.

Componente

• Carduri/formulare/tabele folosesc numai jetoane.
• Grafica are palete pentru ambele teme.
• Logo-urile/pictogramele sunt vizibile corect în ambele teme.

A11y

• Focus-ring vizibil; Modul Contrast ridicat este disponibil.
• Luați în considerare „prefers-redusă-mișcare”.

Performanță

• Tranziție ≤ 200 ms; fără reîncadrări globale.
• Nu există filtre grele/amestecuri pe containere.

15) Documentația în sistemul de proiectare

Jetoane tematice: palete, contraste, stare (hover/focus/active/dezactivate).
Ghiduri: Cum să adăugați un nou accent brendo fără a regresa contrastul.
Diagrame/Media: palete predefinite pentru lumină/întuneric.
Modele: System-first, High-Contrast, comutare lină fără FOUC.
Do/Don' t: inversiune filtru, culori inline, erori invizibile/focalizare.

Scurt rezumat

Comutatorul tematic de lucru este token-uri semantice + System-first + pâlpâire start. Capturați contrastul, centralizați culorile, respectați „preferă schema de culori” și reduceți mișcarea, stocați alegerea utilizatorului și evitați efectele grele. Apoi UI rămâne ușor de citit și de recunoscut în orice setare - de la un meci de noapte live la un box office de zi și ecrane de turneu.