Garaňky re modeim we wizual rahatlyk

1) Näme üçin garaňky tema

Pes ýagtylykda göz rahatlygy, az şöhle we "ýagtylyk çyralary".
Energiýa: OLED/AMOLED-de gara ekranlar batareýany az sarp edýär.
Maglumatlara üns: fon däl-de, mazmuna ünsi jemläň.
Ulanyjynyň garaşmagy: ulgam baýdagy 'prefers-color-scheme' - de-fakto standartı.

2) Ýörelgeler

1. Goýy çal fon> UI ýüzleri üçin arassa gara (has gowy okalma we gradasiýa).
2. Kontentdäki kontrast: "ak gara" däl, uzyn tekst üçin ýumşak kölegeler.
3. Seresap "ýagtylyk": yşyklandyryş/aksentler sessiz, ýöne tapawutly.
4. ≠ kölegäniň çuňlugy: ýiti kontrast däl-de, açyk/bulaşyk kölegede işleýäris.
5. Elýeterlilik: WCAG AA (iň az), görünýän fokus we düşnükli ýagdaýlar.
6. Ulgam sazlamalary birmeňzeş: awto-geçiş we "hereketiň peselmegi".

3) Palitralar we tokenler (mysal)

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

• Garaňky re inimde aksentler ýagtydan 8-12% ýagty bolýar.
• Uly ýerler üçin mutlak # 000-den gaça durup, çal reňkleri (4-5 ädim) ulanyň (AMOLED re modeimi muňa degişli däldir).

4) Teksti we okalmagy

Esasy tekst: açyk çal '#E6E8EB' na '#0E1116' (kontrast ~ 12:1).
Ikinji tekst: '#A6AEB8'; maslahatlar - has bir ädim garaňky/aç-açan.
Uzak okamak: birneme ýyly öwüşginler ("halo" azalýar).
Baglanyşyklar - aksent + default nygtamak; reňk ≠ manynyň ýeke-täk göterijisi.

5) Ýüzler, çuňlugy we aýna

Elevations: `base` → `elev1` → `elev2`; her gatlak 2-4% ýagty/ýyly.
Kölegeler - ýumşak, giň, pes düşnüksiz; "ýalpyldawuk" jübütlerden gaça durmak.
Transluce panelleri (blur) ortaça ýerlikli; substrat bilen tekstiň gapma-garşylygyny üpjün ediň.
Bölüjiler - ýarym inçe serhetler '-bd-soft' ýa-da göze ilmeýän "heýralar".

6) Ýagdaýlar we üns

Hover: fondan 2-3% ýeňil; Active: − 2-3% (has garaňky).
Focus: açyk halka (mysal üçin 'outline: 2px solid #6EA0FF; outline-offset: 2px; '), aksent düwmelerinde-de görünýär.
Disabled: kontrasty seresaplylyk bilen azaldyň; tekst üçin okalýan derejeden aşak düşmäň.

7) Düwmeler, görnüşler we tablisalar

Primary: fon '--accent', tekst '#0E1116'.
Secondary: fon '--bg-elev1', border '--bd-strong', tekst '--fg-primary'.
Giriş meýdançalary: fon '--bg-elev1', fokusda - aktsentli border; placeholder has düşnükli, ýöne okaýarys.
Tablisalar: zebra fon zordan göze ilýär, hower bilen setiriň bölünişi - 2-3% ýagty.

8) Suratlar, nyşanlar we suratlar

Logotipler we piktogrammalar - garaňkyda ters wersiýalar; baý fonda inçe ýagty çyzyklardan gaça duruň.
Surat: gapma-garşy sözbaşylar üçin gara maska ​ ​ (40-60%) goşuň.
Nyşanlar: bir galyňlyk, kontur + doldurmak - "zäherli" däl reňkler.

9) Garaňky temada maglumat-wizualizasiýa

Hatarlaryň reňkleri - orta doýgunlyk; iň az 5 tapawutly äheň.
Torlar we oklar - ýuwulan (alfa 20-30%), gollar - '-fg-muted'.
Düşündirişler/hadysalar - açyk, ýöne okalýar; Diňe reňk bilen däl-de, forma/marker bilen nygtamak.
Boş maglumatlar/lag - ak meýdanlar däl-de, ýumşak "dumanlar".

10) Öndürijilik we batareýa

OLED-de arassa gara (# 000) tygşytlaýar - ulanyjy opsiýasy boýunça AMOLED re modeiminde ulanyň.
Gowşak GPU-larda gaty uly çyralardan/blur-dan gaça duruň.
'prefers-reduced-motion' -a hormat goýuň: animasiýalary/geçişleri ýönekeýleşdiriň.

11) Özüni alyp barmak we üýtgetmek

'prefers-color-scheme' -ni yzarlamak.
Ulanyja açyk geçiş (Light/Dark/System) beriň, saýlamagy saklaň (cookie/localStorage).
Mowzuk çalşylanda - şöhlelenmän: mowzuk synpyny renderden öň goşmak.

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) Elýeterlilik (A11y)

Tekstiň garşylygy ≥ 4. 5:1 (adaty), ≥ 3:1 (uly).
Ýagdaýy diňe reňk bilen kodlamaň: nyşany/patterni/goly ulanyň.
Fokus stilleri we klawiatura nawigasiýasy hökmanydyr.
VoiceOver/TalkBack: rollar, bellikler, tapgyr tertibi.

13) Anti-patternler

Uly ýerlerde düýbünden gara fonda düýbünden ak tekst - "ýalpyldawuk" we ýadawlyk.
Garaňkyda neon aksentleri - "ýagtylyk sesi".
Ýokary kontrastly kölegeler (gaty çäkli "gara çal").
Suratdaky maskasyz aç-açan tekst.
Ýitip barýan placeholder (gaty pes alfa).

14) Komponentleriň mysallary

Düwme

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

Kartoçka

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) Synag-meýilnama

Yşyklandyryş: garaňky otag/gündiz ýagtylygy/köçe agşamy.
Enjamlar: OLED we IPS, ykjam/desktop, dürli dykyzlyklar.
A11y: kontrast-çeker, klawiatura geçişi, placeholder's okalmagy.
Düşünmek: ab-synag "gözüň ýadawlygy" we gije giriş ýalňyşlyklary.
Çykyş: Gara tema açylandan soň RUM-metrika (INP/CLS); GPU ýüklemek (blur/kölege effektleri).

16) Hil ölçegleri

Contrast Violations/1k elementleri (maksat: → 0).
"Gaty garaňky/ýagty".
Night Session Completion (22: 00-06: 00 sessiýalary boýunça özüni alyp baryş metrikleri).
INP/CLS p75 in Dark Mode vs Light (esasy moddan erbet däl).
Opt-in Dark Mode we mowzugy saýlan ulanyjylary saklamak.

17) Işe girizmegiň çek-sanawy

• 4-5 dereje ýüzli gara tema palitrasy
• Tekstiň/nyşanlaryň/çäkleriň gapma-garşylygy WCAG AA-a laýyk gelýär
• Görünýän fokus stilleri we ýagdaýlary (hover/active/disabled)
• Nyşanlar/nyşanlar/suratlar uýgunlaşdyryldy, suratdaky maskalar goşuldy
• Grafikler - ýuwulan torlar, okalýan gollar, "zäherli" däl hatarlar
• Light/Dark/System switch, "çyra" bolmazdan saýlamak
• Hormat 'prefers-color-scheme' we 'prefers-reduced-motion'
• RUM/perf-daşbord, regressiýa aladalary

18) Durmuşa geçirmek meýilnamasy (3 iterasiýa)

Yterasiýa 1 - Binýat (1-2 hepde)

Palitralar/bellikler, esasy ýüzler (base/elev1/elev2), tekst/çäkler, düwmeler/meýdançalar/tablisalar, mowzuk geçişi.

Iterasiýa 2 - Jikme-jiklikler (3-4 hepde)

Garaňky grafika we suratlar, suratdaky maskalar, fokus/ýagdaý, reduced-motion, perf-audit bilen animasiýa.

Yterasiýa 3 - Optimizasiýa (üznüksiz)

AMOLED re modeimi opsiýa hökmünde, gapma-garşylyklary inçe sazlamak, gijelerine ulanyşa ukyply synaglar, RUM-deňeşdirme Light vs Dark, yzygiderli marka/UX-barlaglar.

19) Mini-FAQ

Arassa gara fon goýmalymy?
UI üçin - çuň goýy çal; arassa # 000 "AMOLED-re" opsiýasy bilen goýuň.

Aksentleriň doýgunlygyny ýokarlandyrmak zerurmy?
Garaňkyda - adatça tersine, birneme ýagtylandyrýarlar we "şöhle saçmazlyk" üçin doýgunlygy azaldýarlar.

Bannerleriň şekilleri barada näme aýdyp bilersiňiz?
Gara substraty/maskany goşuň, tekstiň we logotipiň gapma-garşylygyny barlaň.

Jemi

Garaňky tema reňkleriň tersine däl-de, aýratyn dizaýn-re modeimidir: oýlanyşykly palitra, ýüzleriň derejesi, okalmagy, dogry ýagdaýlary, uýgunlaşdyrylan grafika we metbugat, şeýle hem ulgam sazlamalaryna hormat goýmak. Belliklere bil baglaň, gapma-garşylyga we çykyşlara gözegçilik ediň - we Dark Mode gijeki we gündiz ulanyjylar üçin amatly, durnukly we owadan gural bolar.