Koyu Mod Web Tasarımı: En İyi Uygulamalar ve Uygulama Rehberi

Koyu mod, geliştirici tercihinden ana akım tasarım beklentisine dönüştü. Geliştiricilerin %80'inden fazlası IDE'lerinde koyu mod kullanıyor ve büyük işletim sistemleri artık sistem düzeyinde koyu tema içeriyor. Kullanıcılar, web sitelerinin ve uygulamaların tercihlerine saygı duymasını bekliyor. Bu rehber, etkili bir koyu mod deneyimi oluşturmak için gereken tasarım ilkelerini, renk teorisini, CSS uygulamasını ve erişilebilirlik hususlarını kapsar.

Koyu Mod Neden Önemlidir

Koyu mod yalnızca estetik bir seçim değildir. Kullanıcılara somut faydalar sağlar. Düşük ışıklı ortamlarda, koyu arka planlar ekranın yaydığı ışık miktarını azaltarak göz yorgunluğunu azaltır. OLED ve AMOLED ekranlar için, koyu pikseller açık piksellerden çok daha az güç tüketir ve mobil cihazların pil ömrünü uzatır. Koyu mod ayrıca kontrast yoluyla görsel hiyerarşi oluşturarak dikkati içeriğe ve etkileşimli öğelere çeker.

Ancak, yanlış uygulanan koyu mod, hiç olmamasından daha kötü olabilir. Saf beyaz metin ile saf siyah arka plan arasındaki yüksek kontrast, metnin bulanık veya parlıyormuş gibi göründüğü halo efektine neden olabilir. Anahtar, kontrast ve konfor arasında doğru dengeyi bulmaktır.

Koyu Mod Renk Teorisi

Koyu mod tasarımındaki en yaygın hata, açık renk şemasını basitçe tersine çevirmektir. Bu yaklaşım başarısız olur çünkü renk algısı koyu arka planda değişir. Beyaz üzerinde canlı görünen renkler, koyu yüzeylerde rahatsız edici veya ezici görünebilir ve açık gölgelerdeki ince farklılıklar koyu zeminde görünmez hale gelir.

Arka Plan Rengi

Arka plan olarak saf siyah (#000000) kullanmaktan kaçının. Saf siyah, beyaz metinle aşırı kontrast oluşturarak göz yorgunluğuna neden olur. Bunun yerine, derinlik ve görsel ilgi katan hafif bir renk tonuna sahip koyu gri kullanın.

Metin Rengi

Benzer şekilde, gövde metni için saf beyaz (#ffffff) kullanmaktan kaçının. Parlamayı azaltırken okunabilirliği koruyan kırık beyaz tonları kullanın. Saf beyazı başlıklar ve vurgu için saklayın.

• Birincil metin: #e2e8f0 veya #f1f5f9, rahat okuma için
• İkincil metin: #94a3b8, açıklamalar ve etiketler için
• Devre dışı metin: #64748b, etkin olmayan öğeler için

Vurgu Rengi

Vurgu renkleri genellikle koyu mod için ayarlanmalıdır. Beyaz arka planda iyi çalışan doygun renkler, koyu yüzeylerde titreşiyormuş gibi görünebilir. Görsel yorgunluğa neden olmadan görünürlüğü korumak için vurgu renklerinin doygunluğunu hafifçe azaltın ve parlaklığını artırın.

CSS Uygulaması

En sürdürülebilir koyu mod yaklaşımı, prefers-color-scheme medya sorgusu ile CSS özel özelliklerini (değişkenler) kullanmaktır. Bu, renkleri bir kez tanımlamanıza ve değişken değerlerini değiştirerek temalar arasında geçiş yapmanıza olanak tanır.

CSS Özel Özelliklerini Kullanma

:root {
  --bg: #f8fafc;
  --bg-card: #ffffff;
  --text: #1e293b;
  --text-muted: #64748b;
  --primary: #3b82f6;
  --border: #e2e8f0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --bg-card: #1e293b;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --primary: #60a5fa;
    --border: #334155;
  }
}

body {
  background: var(--bg);
  color: var(--text);
}

JavaScript ile Manuel Geçiş

prefers-color-scheme sistem tercihini ele alırken, kullanıcıların manuel geçişe de ihtiyacı vardır. Tercihi localStorage'da saklayın ve kök öğede bir data özelliği ile uygulayın.

function toggleTheme() {
  const current = document.documentElement.dataset.theme;
  const next = current === 'dark' ? 'light' : 'dark';
  document.documentElement.dataset.theme = next;
  localStorage.setItem('theme', next);
}

// On page load
const saved = localStorage.getItem('theme');
if (saved) {
  document.documentElement.dataset.theme = saved;
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.dataset.theme = 'dark';
}

Ardından CSS'te, medya sorgusu yaklaşımıyla birlikte özellik seçiciyi kullanın:

[data-theme="dark"] {
  --bg: #0f172a;
  --bg-card: #1e293b;
  --text: #e2e8f0;
}

Katman ve Derinlik Yönetimi

Açık modda, gölgeler katmanı iletir. Koyu modda, gölgeler koyu yüzeylerde daha az görünür. Bunun yerine, katmanı temsil etmek için giderek açılan arka plan renkleri kullanın. Her katman, bir altındakinden biraz daha açık olmalı ve ışığın yükseltilmiş yüzeylere düşmesini taklit eden görsel bir hiyerarşi oluşturmalıdır.

• Katman 0: Temel arka plan (en koyu)
• Katman 1: Kartlar ve konteynerler (biraz daha açık)
• Katman 2: Açılır menüler gibi kayan öğeler (daha açık)
• Katman 3: Modeller ve diyaloglar (en açık yükseltilmiş yüzey)

Koyu Modda Görseller ve Medya

Parlak görseller, koyu arka planda rahatsız edici görünebilir. Koyu modda görsellerin parlaklığını hafifçe azaltmak için CSS filtresi kullanın. Logo ve simgeler için açık renkli alternatif sürümler sağlayın.

[data-theme="dark"] img {
  filter: brightness(0.9);
}

[data-theme="dark"] .logo-dark {
  display: inline-block;
}

[data-theme="dark"] .logo-light {
  display: none;
}

Erişilebilirlik Hususları

Koyu mod, açık mod ile aynı erişilebilirlik standartlarını karşılamalıdır. WCAG 2.1 yönergeleri, normal metin için minimum 4.5:1 ve büyük metin için 3:1 kontrast gerektirir. Uyumluluğu sağlamak için koyu temanızı kontrast denetleme araçlarıyla test edin.

• Asla yalnızca renge güvenmeyin: Bilgi iletmek için renkle birlikte simgeler, desenler veya etiketler kullanın.
• Ekran okuyucuyla test edin: Tema geçişinin erişilebilir olduğundan ve durumunu bildirdiğinden emin olun.
• prefers-reduced-motion'a saygı gösterin: Azaltılmış animasyon tercih eden kullanıcılar için animasyonları devre dışı bırakın veya azaltın.
• Yeterli odak göstergesi sağlayın: Odak halkaları her iki temada da görünür olmalıdır. Kontrastlı bir anahat rengi kullanın.

Yaygın Koyu Mod Hataları

• Saf siyah arka plan kullanmak: Aşırı kontrast ve halo efekti oluşturur. Bunun yerine koyu gri kullanın.
• Gölgeleri ayarlamayı unutmak: Koyu arka planda koyu gölgeler görünmez. Katman için daha açık yüzey renkleri kullanın.
• Görselleri göz ardı etmek: Koyu arka planda parlak görseller görsel uyumsuzluk yaratır. Parlaklık filtresi uygulayın veya koyu varyantlar sağlayın.
• Renkleri sabit kodlamak: Tema geçişini imkansız kılar. Her zaman CSS özel özelliklerini kullanın.
• Kullanıcı tercihini kalıcı kılmamak: Tema gezinme sırasında sıfırlanırsa kullanıcılar hayal kırıklığına uğrar. Tercihi localStorage'da saklayın.
• Stilsiz içerik yanıp sönmesi (FOUC): Sayfa render edilmeden önce temayı ayarlamak için CSS'ten önce bir satır içi script kullanın.