Karanlık Mod ve görsel konfor

1) Neden karanlık bir tema

Düşük ışıkta göz konforu, daha az parlama ve "ışık yanıp sönüyor".
Enerji: Karanlık ekranlar OLED/AMOLED'de daha az pil harcar.
Verilere odaklanın: Arka plana değil, içeriğe odaklanın.
Kullanıcı beklentileri: Sistem bayrağı "prefers-color-scheme" fiili standarttır.

2) İlkeler

1. Koyu gri arka plan> UI yüzeyleri için saf siyah (daha iyi okunabilirlik ve derecelendirme).
2. İçerikte kontrast:'siyah beyaz'değil, uzun metinler için yumuşak tonlar.
3. Dikkatli "parlaklık": arka ışıklar/vurgular boğuk, ancak ayırt edilebilir.
4. Gölge ≠ derinliği: Keskin kontrast değil, ışık/bulanık gölge ile çalışıyoruz.
5. Kullanılabilirlik: WCAG AA (minimum), görünür odak ve anlaşılabilir durumlar.
6. Sistem ayarları önceliklidir: otomatik anahtarlama ve "azaltılmış hareket".

3) Palet ve belirteçler (örnek)

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

• Karanlık moddaki aksanlar, ışık modundakinden + %8-12 daha hafiftir.
• Büyük alanlar için mutlak # 000'den kaçınarak gri tonlama (4-5 adım) kullanın (istisna - AMOLED modu).

4) Metin ve okunabilirlik

Gövde metni: açık gri '# E6E8EB' - '# 0E1116' (kontrast ~ 12:1).
İkincil metin: '# A6AEB8'; İpuçları - bir adım daha koyu/daha şeffaf.
Uzun okuma: hafif sıcak tonları ("hale" azaltmak).
Bağlantılar - accent + alt çizgi varsayılan olarak; Renk tek anlam aracı ≠.

5) Yüzeyler, derinlik ve cam

Yükseltiler: 'Baz' - 'elev1' - 'elev2'; Her katman %2-4 oranında daha hafif/daha sıcaktır.
Gölgeler yumuşak, geniş, düşük opaklık ile; "Parlayan" vuruşlardan kaçının.
Yarı saydam paneller (bulanıklık) orta derecede uygundur; Metni altlıkla karşılaştırın.
Sınırlayıcılar yarı ince sınırlar '-bd-soft' veya zar zor görünen "mirasçılar'dır.

6) Devletler ve odak

Hover: + 2-3 % daha açık arka plan; Etkin: − %2-3 (daha koyu).
Odak: açık halka (örn. 'outline: 2px katı # 6EA0FF; anahat-ofset: 2px; '), aksan düğmelerinde görünür.
Devre dışı: kontrastı dikkatlice azaltın; Metin için okunabilir seviyenin altına düşmeyin.

7) Düğmeler, formlar ve tablolar

Birincil: arka plan '--accent', metin '# 0E1116'.
İkincil: arka plan '--bg-elev1', kenarlık '--bd-güçlü', metin '--fg-birincil'.
Giriş alanları: arka plan '--bg-elev1', odaklı - vurgu kenarlığı; Yer tutucu daha donuk ama okunabilir.
Tablolar: zebra arka planı zar zor fark edilir, vurgulu satır seçimi + 2-3 % daha hafiftir.

8) İllüstrasyonlar, logolar ve fotoğraflar

Logolar ve piktogramlar - karanlık üzerinde inversiyon versiyonları; Doymuş arka planlarda ince, hafif çizgilerden kaçının.
Fotoğraf: Üstte zıt başlıklar için koyu bir maske (%40-60) ekleyin.
Simgeler: tek kalınlık, kontur + dolgu - duruma göre, "zehirli" renkler değil.

9) Karanlık bir temada veri görselleştirme

Satırların renkleri ılımlı doygunluktadır; En az 5 farklı ton.
Izgaralar ve eksenler - sessiz (alfa 20-30 %), imzalar - '--fg-sessiz'.
Açıklamalar/olaylar canlı ama okunabilir; Sadece renk değil, şekil/işaretleyici ile altını çizin.
Boş veri/gecikme - yumuşak "sisler", beyaz alanlar değil.

10) Performans ve pil

OLED gerçekten saf siyahı (# 000) kaydeder - kullanıcı seçeneğine göre AMOLED modunda kullanın.
Zayıf GPU'larda katı büyük ışıma/bulanıklıktan kaçının.
Respect 'prefers-reduced-motion': Animasyonları/geçişleri basitleştirin.

11) Davranış ve anahtarlama

Varsayılan değer 'prefers-color-scheme'i izlemektir.
Kullanıcıya açık bir anahtar verin (Light/Dark/System), seçimi saklayın (cookie/localStorage).
Temayı değiştirirken - yanıp sönme yok: Oluşturmadan önce tema sınıfını önceden ekleyin.

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) Kullanılabilirlik (A11y)

Metin kontrastı ≥ 4. 5:1 (normal), ≥ 3:1 (büyük).
Durumu yalnızca renkli olarak kodlamayın: simge/desen/imza kullanın.
Odak stilleri ve klavye navigasyonu zorunludur.
VoiceOver/TalkBack: roller, etiketler, taba kuyruğu.

13) Anti-desenler

Geniş alanlarda kesinlikle siyah bir arka plan üzerinde kesinlikle beyaz metin - "titreme've yorgunluk.
Karanlık üzerine neon vurgular - "ışık gürültüsü".
Yüksek kontrastlı gölgeler (sert kenarlıklı siyah üzerine gri).
Fotoğrafta maskesiz saydam metin.
Ufuk yer tutucu (alfa çok düşük).

14) Bileşenlere örnekler

Düğme

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

Kart

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) Test planı

Aydınlatma: karanlık oda/gün ışığı/sokak akşamı.
Cihazlar: OLED ve IPS, mobil/masaüstü, farklı yoğunluklar.
A11y: kontrast denetleyicisi, klavye geçişi, yer tutucuların okunabilirliği.
Algı: Ab-test "göz yorgunluğu've geceleri giriş hataları.
Performans: Koyu bir tema ekledikten sonra RUM metrikleri (INP/CLS); GPU yükü (bulanıklaştırma/gölge efektleri).

16) Kalite metrikleri

Öğeler Violations/1k kontrast (hedef: - 0).
Şikayet Oranı'çok karanlık/parlak ".
Gece Seansı Tamamlama (seans 22: 00-06: 00'a göre davranışsal ölçümler).
Karanlık Modda INP/CLS p75 vs Işık (temelden daha kötü değil).
Opt-in Karanlık Modu ve bir tema seçen kullanıcıların tutulması.

17) Kontrol listesini başlat

• 4-5 yüzey seviyesine sahip koyu tema paleti
• Metnin/simgelerin/kenarlıkların kontrastı WCAG AA'ya karşılık gelir
• Görünür odak stilleri ve durumları (hover/active/disabled)
• Logolar/simgeler/fotoğraflar uyarlandı, fotoğraftaki maskeler eklendi
• Grafikler - sessiz ızgaralar, okunabilir başlıklar, zehirsiz satırlar
• Işık/Karanlık/Sistem anahtarı, seçimi "flaş" olmadan kaydetme
• 'prefers-color-scheme've' prefers-reduced-motion 'için saygı
• RUM/perf-dashboard, regresyon uyarıları

18) Uygulama planı (3 yineleme)

Yineleme 1 - Temel (1-2 hafta)

Palet/belirteçler, taban yüzeyleri (taban/elev1/elev2), metin/kenarlıklar, düğmeler/alanlar/tablolar, tema anahtarı.

Yineleme 2 - Granülarite (3-4 hafta)

Karanlıkta grafikler ve resimler, fotoğrafta maskeler, odak/durumlar, azaltılmış hareket, perf-denetim dikkate alınarak animasyonlar.

Yineleme 3 - Optimizasyon (Sürekli)

Bir seçenek olarak AMOLED modu, ince ayar kontrastları, geceleri kullanılabilirlik testleri, Light vs Dark RUM karşılaştırması, düzenli marka/UX denetimleri.

19) Mini-SSS

Saf siyah bir arka plan yapmalı mıyım?
UI için derin koyu gri daha iyidir; "AMOLED modu" seçeneği ile saf # 000 bırakın.

Aksanların doygunluğunu artırmam gerekiyor mu?
Karanlıkta - genellikle, aksine, "parlamamak" için doygunluğu hafifçe aydınlatır ve azaltır.

Peki ya afiş resimleri?
Koyu bir arka plan/maske ekleyin, metin ve logonun kontrastını kontrol edin.

Toplam

Karanlık tema bir renk inversiyonu değil, ayrı bir tasarım modudur: düşünceli bir palet, yüzey seviyeleri, okunabilirlik, doğru durumlar, uyarlanmış grafikler ve medya ve sistem ayarlarına saygı. Belirteçlere yaslanın, kontrastı ve performansı kontrol edin - ve Karanlık Mod, gece ve gündüz kullanıcıları için uygun, istikrarlı ve güzel bir araçtır.