Modul întunecat și confortul vizual

1) De ce o temă întunecată

Confortul ochilor în lumină scăzută, mai puțină strălucire și „fulgere ușoare”.
Energie: Ecranele întunecate cheltuiesc mai puțină baterie pe OLED/AMOLED.
Concentrați-vă pe date: concentrați-vă pe conținut, nu pe fundal.
Așteptările utilizatorilor: pavilionul de sistem „preferă schema de culori” este standardul de facto.

2) Principii

1. Fundal gri închis> negru pur pentru suprafețe UI (o mai bună lizibilitate și gradare).
2. Contrast în conținut: nu „alb în negru”, ci nuanțe moi pentru texte lungi.
3. Atenție „luminozitate”: luminile de fundal/accentele sunt înăbușite, dar distinctive.
4. Umbră ≠ adâncime: lucrăm cu umbră ușoară/încețoșată, nu cu contrast ascuțit.
5. Disponibilitate: WCAG AA (minim), focalizare vizibilă și stări ușor de înțeles.
6. Setările sistemului sunt primare: comutare automată și „mișcare redusă”.

3) Paletă și jetoane (exemplu)

json
{
"mode": "dark",
"color": {
"bg": { "base": "#0E1116", "elev1": "#141821", "elev2": "#1A1F2B", "subtle": "#0B0E13" },
"fg": { "primary": "#E6E8EB", "muted": "#A6AEB8", "inverse": "#11131A" },
"accent": { "primary": "#6EA0FF", "warning": "#FFB547", "critical": "#FF6A6A", "success": "#66D19E" },
"border": { "soft": "#2A2F37", "strong": "#3A4150" },
"chart": { "a": "#6EA0FF", "b": "#66D19E", "c": "#FFB547", "d": "#C58CFF", "e": "#7DD3FC" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.35)", "md": "0 6px 18px rgba(0,0,0,.45)" }
}

css
@media (prefers-color-scheme: dark) {
:root {
--bg-base:#0E1116; --bg-elev1:#141821; --bg-elev2:#1A1F2B;
--fg-primary:#E6E8EB; --fg-muted:#A6AEB8;
--accent:#6EA0FF; --warning:#FFB547; --critical:#FF6A6A; --success:#66D19E;
--bd-soft:#2A2F37; --bd-strong:#3A4150;
}
}

• Accentele în modul întunecat sunt cu + 8-12% mai ușoare decât în modul lumină.
• Utilizați tonuri de gri (4-5 pași), evitând numărul absolut # 000 pentru suprafețe mari (excepție - modul AMOLED).

4) Text și lizibilitate

Textul corpului: gri deschis '# E6E8EB' la '# 0E1116' (contrast ~ 12:1).
Text secundar: '# A6AEB8'; sugestii - un pas mai întunecat/mai transparent.
Lectură lungă: nuanțe ușor calde (reduce „halo”).
Link-uri - accent + subliniați în mod implicit; culoarea ≠ singurul mediu de semnificație.

5) Suprafețe, adâncime și sticlă

Altitudini: „bază” → „elev1” → „elev2”; fiecare strat este mai ușor/mai cald cu 2-4%.
Umbrele sunt moi, largi, cu opacitate scăzută; evitați accidentele vasculare cerebrale „strălucitoare”.
Panourile translucide (blur) sunt moderat adecvate; contrastează textul cu substratul.
Delimitatoarele sunt limite semi-subțiri "--bd-soft' sau abia vizibile" moștenitori ".

6) Statele și concentrarea

Hover: + 2-3% fundal mai ușor; Activ: − 2-3% (mai închis la culoare).
Focalizare: inel clar (ex. 'outline: 2px solid # 6EA0FF; contur-offset: 2px; "), vizibil pe butoanele de accent.
Cu handicap: reduce contrastul cu atenție; nu cădeți sub nivelul care poate fi citit pentru text.

7) Butoane, formulare și tabele

Primar: fundal '--accent', text '# 0E1116'.
Secundar: fundal „--bg-elev1”, frontieră „--bd-puternic”, text „--fg-primar”.
Câmpuri de intrare: fundal „--bg-elev1”, cu focalizare - frontieră cu accent; înlocuitor este duller, dar lizibil.
Tabele: fundal zebra este abia vizibil, selecție rând la hover este + 2-3% mai ușor.

8) Ilustrații, logo-uri și fotografii

Logo-uri și pictograme - versiuni de inversiune pe întuneric; evitați liniile subțiri și ușoare pe fundaluri saturate.
Fotografie: Adăugați o mască întunecată (40-60%) pentru anteturi contrastante pe partea de sus.
Icoane: grosime unică, contur + umplere - prin condiție, nu culori „otrăvitoare”.

9) Vizualizarea datelor într-o temă întunecată

Culorile rândurilor sunt de saturație moderată; cel puțin 5 tonuri distincte.
Grile și axe - dezactivate (alfa 20-30%), semnături - „--fg-muted”.
Adnotările/incidentele sunt vii, dar lizibile; subliniază cu forma/marker, nu doar culoarea.
Date goale/decalaj - „ceață” moale, nu câmpuri albe.

10) Performanță și baterie

OLED economisește într-adevăr negru pur (# 000) - utilizarea în modul AMOLED în funcție de opțiunea utilizatorului.
Evitați strălucirea/estomparea solidă pe GPU-urile slabe.
Respect „preferă reducerea mișcării”: Simplificați animațiile/tranzițiile.

11) Comportament și comutare

Implicit este să urmați „preferă-culoare-schemă”.
Oferiți utilizatorului un comutator explicit (Light/Dark/System), păstrați selecția (cookie/localStorage).
La schimbarea temei - fără flash-uri: pre-adăugați clasă tematică înainte de redare.

html
<script>
const saved = localStorage. getItem('theme');
const sysDark = window. matchMedia?.('(prefers-color-scheme: dark)'). matches;
document. documentElement. dataset. theme = saved?? (sysDark? 'dark': 'light');
</script>

12) Disponibilitate (A11y)

Contrast text ≥ 4. 5:1 (regulat), ≥ 3:1 (mare).
Nu codificați starea numai în culoare: utilizați pictograma/tiparul/semnătura.
Stilurile de focalizare și navigarea la tastatură sunt obligatorii.
VoiceOver/TalkBack: roluri, etichete, taba coadă.

13) Anti-modele

Text absolut alb pe un fundal absolut negru în zone mari - „pâlpâire” și oboseală.
Neon accente pe întuneric - „zgomot de lumină”.
Umbre de contrast ridicat (gri pe negru cu margine dură).
Text transparent în fotografie fără mască.
Substituent de dispariție (alfa prea mic).

14) Exemple de componente

Butonul

css
.button {
background: var(--accent); color: var(--bg-base);
border-radius: 12px; padding: 10px 16px;
box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.button:hover { filter: brightness(1. 06); }
.button:active { filter: brightness(.94); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

Card

css
.card {
background: var(--bg-elev1); border: 1px solid var(--bd-soft); border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

15) Planul de încercare

Iluminat: camera intunecata/lumina zilei/seara stradala.
Dispozitive: OLED și IPS, mobile/desktop, densități diferite.
A11y: contrast checker, tastatură trece, lizibilitatea substituenților.
Percepție: ab-test „oboseala ochilor” și erori de intrare pe timp de noapte.
Performanță: măsurători ROM (INP/CLS) după includerea unei teme întunecate; Sarcina GPU (efecte blur/shadow).

16) Măsurători ale calității

Contrast Violations/1k elemente (țintă: → 0).
Rata de plângere pe „prea întunecat/luminos”.
Finalizarea sesiunii de noapte (valori comportamentale prin sesiunea 22: 00-06: 00).
INP/CLS p75 în modul întunecat vs lumină (nu mai rău decât de bază).
Opt-in Dark Mode și păstrarea utilizatorilor care aleg o temă.

17) Lista de verificare lansare

• Paleta de teme întunecate cu 4-5 niveluri de suprafață
• Contrastul de text/icoane/frontiere corespunde WCAG AA
• Stiluri și stări vizibile de focalizare (hover/active/dezactivate)
• Logos/icoane/fotografii adaptate, măști în fotografia adăugată
• Grafice - grile dezactivate, subtitrări lizibile, rânduri non-otrăvitoare
• Comutator de lumină/întuneric/sistem, salvând selecția fără „flash”
• Respect pentru „preferă schema de culori” și „preferă mișcarea redusă”
• ROM/perf-tablou de bord, alerte de regresie

18) Planul de implementare (3 iterații)

Iterație 1 - Fundație (1-2 săptămâni)

Paletă/jetoane, suprafețe de bază (bază/elev1/elev2), text/borduri, butoane/câmpuri/tabele, comutator tematic.

Iterație 2 - Granularitate (3-4 săptămâni)

Grafice și ilustrații în întuneric, măști în fotografie, focus/stări, animații ținând cont de mișcare redusă, audit perf.

Iterație 3 - Optimizare (continuă)

Modul AMOLED ca opțiune, contraste de reglaj fin, teste de utilizare pe timp de noapte, comparație Light vs Dark RUM, audituri regulate de marcă/UX.

19) Mini-Întrebări frecvente

Ar trebui să fac un fundal negru pur?
Pentru UI, un gri închis adânc este mai bun; lăsați pur # 000 cu „modul AMOLED” opțiune.

Trebuie să cresc saturația accentelor?
În întuneric - de obicei, dimpotrivă, ușor luminează și reduce saturația pentru a nu „străluci”.

Ce zici de imagini banner?
Adăugați un fundal întunecat/mască, verificați contrastul textului și logo-ului.

Total

Tema întunecată nu este o inversiune a culorilor, ci un mod de design separat: o paletă grijulie, niveluri de suprafață, lizibilitate, stări corecte, grafică și media adaptate și respect pentru setările sistemului. Sprijiniți-vă pe jetoane, contrastul de control și performanța - și modul întunecat este un instrument convenabil, stabil și frumos pentru utilizatorii de noapte și de zi.