Öğreticiler

Karanlık Mod Uygulaması: Eksiksiz Geliştirici Rehberi

7 dk okuma

Karanlık mod, niş bir tercihten beklenen bir özelliğe dönüştü. macOS, Windows, Android, iOS — her platformdaki kullanıcılar sistem genelinde karanlık görünüm ayarlayabilir ve web sitelerinin ile uygulamaların buna uymasını bekler. Karanlık modu doğru uygulamak, beyazı siyahla değiştirmekten çok daha fazlasını gerektirir: renk, kontrast ve kullanıcı kontrolüne sistematik bir yaklaşım zorunludur. Bu rehber, CSS mimarisinden JavaScript geçiş mekaniklerine ve her iki temayı kapsamlı biçimde test etmeye kadar tüm süreci adım adım açıklar.

Temalar için CSS Özel Özellikleri

CSS'te karanlık modu yönetmenin en sürdürülebilir yolu, özel özelliklerdir (CSS değişkenleri olarak da bilinir). Renk değerlerini stil sayfalarına dağıtmak yerine, her rengi :root üzerinde bir değişken olarak tanımlarsınız; ardından bu değişkenleri karanlık mod için yeniden tanımlarsınız. Bileşen stilleri yalnızca değişkenlere başvurur — asla ham hex kodlarına değil.

Açık ve Karanlık Paletlerinizi Tanımlamak

Varsayılan olarak açık mod paletiyle başlayın. Temiz bir başlangıç noktası şöyle görünebilir:

:root {
  /* Arka planlar */
  --color-bg-base:      #FFFFFF;
  --color-bg-elevated:  #F8F9FA;
  --color-bg-overlay:   #F1F3F5;

  /* Metin */
  --color-text-primary:   #1A1A2E;
  --color-text-secondary: #4A4A6A;
  --color-text-muted:     #6C757D;

  /* Kenarlıklar */
  --color-border:         #DEE2E6;
  --color-border-strong:  #ADB5BD;

  /* Marka / vurgu */
  --color-accent:         #3B82F6;
  --color-accent-hover:   #2563EB;

  /* Geri bildirim */
  --color-success:  #22C55E;
  --color-warning:  #F59E0B;
  --color-danger:   #EF4444;
}

Ardından karanlık mod için ayrı bir blokta geçersiz kılmaları tanımlayın. Buradaki temel içgörü, renkleri tersine çevirmediğinizdir — karanlık bir yüzey için farklı, amaca özel bir palet seçiyorsunuz:

[data-theme="dark"] {
  /* Arka planlar */
  --color-bg-base:      #0F0F17;
  --color-bg-elevated:  #1A1A2E;
  --color-bg-overlay:   #252540;

  /* Metin */
  --color-text-primary:   #E8E8F0;
  --color-text-secondary: #A8A8C0;
  --color-text-muted:     #6A6A88;

  /* Kenarlıklar */
  --color-border:         #2E2E4A;
  --color-border-strong:  #4A4A6A;

  /* Marka / vurgu — karanlık arka planda okunabilirlik için genellikle biraz daha açık */
  --color-accent:         #60A5FA;
  --color-accent-hover:   #93C5FD;

  /* Geri bildirim — sertliği önlemek için hafif doygunluk azaltması */
  --color-success:  #4ADE80;
  --color-warning:  #FCD34D;
  --color-danger:   #F87171;
}

Açık modda #3B82F6 olan vurgu renginin karanlık modda #60A5FA olduğuna dikkat edin. Ton aynı fakat açıklık artıyor — bu zorunludur, çünkü kontrast bağlamı tersine döndü. Beyaz bir arka plana karşı WCAG AA'yı geçen bir renk, siz onu ayarlamadıkça neredeyse siyah bir arka plana karşı başarısız olacaktır. Ton Üreticisi, herhangi bir rengin tam 50–950 aralığını keşfetmenizi sağlar ve her tema için uygun tonu seçmeyi kolaylaştırır.

Bileşenlerde Değişken Kullanımı

Palet oluşturulduktan sonra, her bileşen ham değerler yerine değişkenlere başvurur:

.card {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.btn-primary {
  background-color: var(--color-accent);
  color: #FFFFFF;
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
}

<html> öğesinde [data-theme="dark"] niteliği mevcut olduğunda, tüm değişkenler aynı anda güncellenir ve bunlara başvuran her bileşen görünümünü değiştirir — ek CSS gerekmez.

prefers-color-scheme Medya Sorgusu

Kullanıcı bir geçiş düğmesiyle etkileşime geçmeden önce, prefers-color-scheme medya sorgusunu kullanarak işletim sistemi tercihini onurlandırabilirsiniz. Bu medya sorgusu, işletim sistemi karanlık görünüme ayarlandığında tetiklenir.

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-base:      #0F0F17;
    --color-bg-elevated:  #1A1A2E;
    --color-bg-overlay:   #252540;
    --color-text-primary:   #E8E8F0;
    --color-text-secondary: #A8A8C0;
    --color-text-muted:     #6A6A88;
    --color-border:         #2E2E4A;
    --color-border-strong:  #4A4A6A;
    --color-accent:         #60A5FA;
    --color-accent-hover:   #93C5FD;
    --color-success:  #4ADE80;
    --color-warning:  #FCD34D;
    --color-danger:   #F87171;
  }
}

Bu yaklaşım herhangi bir JavaScript gerektirmez, sıfır düzen kayması sağlar ve kullanıcının beyan ettiği tercihi sayfa yüklenmesiyle hemen uygular. Doğru temel budur. Sınırlama, kullanıcıların uygulamanızda bunu geçersiz kılamamasıdır — işletim sistemi karanlıksa, site karanlıktır ve çıkış yolu yoktur. Bu nedenle çoğu üretim uygulaması, medya sorgusunun üzerine bir JavaScript geçiş düğmesi katmanı ekler.

Her İki Yaklaşımı Birleştirme

Önerilen kalıp, medya sorgusunu varsayılan olarak ve data-theme niteliğini açık bir geçersiz kılma olarak kullanır. Bunu CSS özgüllük hilesiyle veya kurallarınızı doğru sırayla düzenleyerek halledebilirsiniz:

/* 1. Açık mod varsayılanı */
:root {
  --color-bg-base: #FFFFFF;
  /* ... */
}

/* 2. İşletim sistemi karanlık mod geçersiz kılması (açık tercih ayarlanmadığında) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-base: #0F0F17;
    /* ... */
  }
}

/* 3. Açık karanlık mod (kullanıcı JS aracılığıyla geçiş yaptı) */
[data-theme="dark"] {
  --color-bg-base: #0F0F17;
  /* ... */
}

Medya sorgusundaki :not([data-theme="light"]) seçicisi, işletim sistemi karanlık tercihinin yalnızca kullanıcı açıkça açık modu seçmediğinde uygulanacağı anlamına gelir. Geçiş yaptıklarında, açık seçimleri kazanır.

JavaScript ile Geçiş Mekanizması

İyi uygulanmış bir geçiş düğmesi üç şey yapar: mevcut görünümü hemen değiştirir, tercihi localStorage'a kaydeder ve ilk boyamadan önce sayfa yüklenirken kaydedilen tercihi okur.

Yükleme Sırasında Tercihi Okuma

Bu betik, yanlış temanın flaşını önlemek için <head> içinde — sayfa oluşturulmadan önce — çalışmalıdır:

<head>
  <script>
    (function() {
      const stored = localStorage.getItem('theme');
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      const theme = stored ?? (prefersDark ? 'dark' : 'light');
      document.documentElement.setAttribute('data-theme', theme);
    })();
  </script>
</head>

Bu, herhangi bir stil uygulanmadan önce <html> üzerinde data-theme'i hemen ayarlar. Tarayıcı, ilk boyamadan doğru özel özellik değerlerini hesaplar — flaş olmaz.

Geçiş Fonksiyonu

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

// Bir düğmeye bağla
document.getElementById('theme-toggle').addEventListener('click', toggleTheme);

Geçiş Düğmesi Durumunu Senkronize Etme

Geçiş düğmesi mevcut modu görsel olarak yansıtmalıdır. Basit bir yaklaşım simgeler kullanır:

<button id="theme-toggle" aria-label="Toggle dark mode">
  <span class="icon-light">☀️</span>
  <span class="icon-dark">🌙</span>
</button>

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

Simge görünürlüğü data-theme'e bağlı CSS değişkenleriyle kontrol edildiğinden, nitelik değiştiğinde düğme durumu otomatik olarak güncellenir — ek JavaScript gerekmez.

Renk Uyarlama Stratejileri

Karanlık mod renkleri seçmek, açık paletinizi tersine çevirmek kadar basit değildir. İyi karanlık renk seçimlerini yönlendiren çeşitli ilkeler vardır.

Kontrastı Azaltın, Sadece Tersine Çevirmeyin

Saf beyaz metin saf siyah arka plan üzerinde (#FFFFFF üzerinde #000000) teknik olarak maksimum kontrast — 21:1 — sağlar, ancak uzun süreli okuma için zihinsel açıdan yorucudur. Her iki ucu da azaltın: gövde metni için #E8E8F0 gibi beyaza yakın bir renk ve sayfa arka planı için #0F0F17 gibi çok koyu bir lacivert kullanın. Bu, bol kontrast (15:1'in üzerinde) sağlarken görsel yorgunluğu azaltır.

Karanlık temanızdaki her metin/arka plan kombinasyonunun en az WCAG AA'yı karşıladığını doğrulamak için Kontrast Denetleyicisi'ni kullanın (normal metin için 4,5:1, büyük metin için 3:1). Yaygın başarısızlık noktaları şunlardır:

  • Form alanlarındaki yer tutucu metin
  • Devre dışı düğme etiketleri
  • İkincil meta veri metni (zaman damgaları, yazar bilgileri)
  • Görünür etiketleri olmayan yalnızca simge düğmeleri

Karanlık Yüzeylerle Katmanlı Yükseltme

Açık modda yükseltme genellikle gölgelerle ifade edilir. Karanlık modda, gölgeler karanlık arka planlara karşı görünmez hale gelir. Material Design 3 spesifikasyonu daha etkili bir yaklaşım sundu: daha açık yüzeyler daha yüksek hissettirir. Yükseltilmiş bileşenler için hafif daha açık arka planlar kullanın:

/* Karanlık mod yükseltme ölçeği */
--color-bg-base:     #0F0F17;  /* Sayfa arka planı */
--color-bg-elevated: #1A1A2E;  /* Kartlar, kenar çubukları */
--color-bg-overlay:  #252540;  /* Modallar, açılır menüler */
--color-bg-tooltip:  #2E2E4A;  /* İpuçları */

Taban olarak #0F0F17, kartlar için #1A1A2E, modallar için #252540 — her adım HSL açıklık açısından yaklaşık %8–10 daha açıktır. Bu, gölgelere dayanmadan net bir görsel hiyerarşi oluşturur.

Karanlık Mod Renklerini Hafifçe Doygunluğunu Azaltın

Yüksek doygunluktaki renkler karanlık arka planlarda neon gibi ve sert görünür. Marka renklerinizi karanlık mod için uyarlarken, açıklığı artırmanın yanı sıra doygunluğu %10–20 azaltın. Canlı bir #22C55E başarı yeşili yerine #4ADE80 tercih edin — daha açık ve biraz daha az doygun, göz yorgunluğu olmadan başarıyı ifade eder.

Ton Üreticisi burada idealdir: markanızın birincil yeşilini veya mavini girin ve karanlık mod metin ve simge kullanımları için 300–400 aralığını, etkileşimli öğeler için ise 500–600 aralığını keşfedin.

Görüntüler ve Medya

Beyaz arka planlı görüntüler karanlık modda rahatsız edici görünür. CSS yardımcı olabilir:

/* Karanlık modda görüntülerin sertliğini azalt */
[data-theme="dark"] img:not([src*=".svg"]) {
  filter: brightness(0.9) contrast(1.05);
}

/* Veya görüntülerin arka planla hafifçe harmanlanmasına izin ver */
[data-theme="dark"] img {
  mix-blend-mode: luminosity;
  opacity: 0.9;
}

Uyarlanması gereken SVG simgeleri için, dolgu değeri olarak currentColor kullanmak, bunların mevcut metin rengini otomatik olarak benimseyeceği anlamına gelir:

.icon { color: var(--color-text-secondary); }

<svg fill="currentColor" viewBox="0 0 24 24">...</svg>

Her İki Modu Test Etme

Kapsamlı testler, karanlık mod gerilemeinin üretime girmesini önler.

Tarayıcı Geliştirici Araçları Emülasyonu

Chrome ve Firefox, işletim sistemi ayarını değiştirmeden Geliştirici Araçları'nda karanlık mod emülasyonu sunar. Chrome'da: Geliştirici Araçları'nı açın, üç noktalı menüye tıklayın, Daha Fazla Araç → Oluşturma'ya gidin ve "CSS medya özelliğini taklit et prefers-color-scheme" ayarını "dark" yapın. Bu, her iki modu yan yana karşılaştırmanıza olanak tanır.

Otomatik Kontrast Testi

Manuel spot kontrol hata yapmaya açıktır. WCAG eşiklerini karşılamayan yeni renk eklemelerini yakalamak için CI'nıza otomatik kontrast denetimi entegre edin. Kontrast Denetleyicisi, ön plan/arka plan çiftini tüm WCAG seviyeleri karşı hızlıca doğrulamanızı sağlar — herhangi bir hex çiftini yapıştırın ve oranı anında görün.

Gerçek İçerikle Test Edin

Karanlık mod hataları genellikle dinamik içerik sayfalarında görünür: kullanıcı tarafından yüklenen görüntüler, üçüncü taraf yerleştirmeleri, grafikler ve haritalar. Yalnızca tasarım sisteminizin bileşen kütüphanesini değil, gerçekçi bir içerik örneğiyle test edin.

İşletim Sistemi Düzeyinde Test

Geliştirici Araçları emülasyonuyla doğruladıktan sonra, işletim sisteminiz gerçekten karanlık moda ayarlıyken test edin. prefers-color-scheme medya sorgusu, işletim sistemi ayarına göre tetiklenir ve bazı tarayıcılar ayarın gerçek mi yoksa emüle mi olduğuna bağlı olarak biraz farklı davranır. Ayrıca geçişi test edin: bir sayfa açıkken modları değiştirin ve düzen kayması veya oluşturma bozukluğu olmadığını onaylayın.

Yaygın Tuzaklar Kontrol Listesi

  • Değişkenler yerine bileşen CSS'inde sabit kodlanmış hex değerleri — stil sayfalarınızda ham hex kodları için arama yapın ve değişkenlerle değiştirin
  • Sabit kodlanmış fill="#000000" olan SVG simgeler — fill="currentColor" olarak değiştirin
  • data-theme'e uymayan üçüncü taraf bileşenler — bunları kapsamlı bir CSS katmanına sarın
  • color-scheme özelliği ayarlanmamış — tarayıcı chrome'unun (kaydırma çubukları, form kontrolleri) de uyarlanması için :root'a color-scheme: light dark ekleyin
  • <head>'den <meta name="color-scheme"> eksik — CSS yüklenmeden önce tarayıcının doğru arka plan rengini uygulayabilmesi için ekleyin
<meta name="color-scheme" content="light dark">

:root {
  color-scheme: light dark;
}

Bu küçük ekleme, yerel kaydırma çubuklarının, tarih seçicilerinin ve diğer işletim sistemi tarafından oluşturulan form kontrollerinin otomatik olarak karanlık varyantlarına geçmesini sağlar — pek çok uygulamanın gözden kaçırdığı bir ayrıntı.

Temel Çıkarımlar

  • Tüm renkleri :root üzerinde CSS özel özellikleri olarak tanımlayın ve [data-theme="dark"] kullanarak karanlık mod için geçersiz kılın. Bileşen stilleri yalnızca değişkenlere başvurur; bu, palet oluşturulduktan sonra tema değiştirmeyi zahmetsiz kılar.
  • Karanlık görünüm için işletim sistemlerini ayarlamış kullanıcılar için otomatik varsayılan olarak prefers-color-scheme: dark kullanın. Geçersiz kılmak isteyen kullanıcılar için üstüne localStorage kalıcılığıyla JavaScript geçiş düğmesi katmanı ekleyin.
  • Yanlış temanın ilk boyama flaşını önlemek için CSS yüklenmeden önce <head> içinde anti-flaş betiğini çalıştırın.
  • Karanlık mod renkleri, tersine çevrilmiş açık renkler değildir — aşırı kontrastı azaltın, yükseltmeyi iletmek için daha açık arka planlar kullanın ve neon sertliğini önlemek için marka vurgularını hafifçe doygunluğunu azaltın.
  • Her metin/arka plan çiftini Kontrast Denetleyicisi ile doğrulayın ve her iki tema için her marka renginin doğru tonunu bulmak amacıyla Ton Üreticisi'ni kullanın.
  • Yerel tarayıcı kullanıcı arayüzü öğelerinin (kaydırma çubukları, girişler) de otomatik olarak değişmesi için color-scheme: light dark ve ilgili <meta> etiketini ekleyin.

İlgili Renkler

black

#000000

blue

#0000FF

green

#008000

navy

#000080

white

#FFFFFF

İlgili Markalar

Meta

Helping people connect

1 renk

Drop

3 renk

Hex

8 renk

Must

2 renk

Open

2 renk

Reflect

2 renk

İlgili Araçlar

Kontrast Denetleyicisi

WCAG 2.1 yönergelerine göre renk kontrast oranlarını kontrol edin. Normal ve büyük metin için AA ve AAA uyumluluğunu test edin.

Aracı aç

Ton Oluşturucu

Tasarım sistemleri için herhangi bir temel renkten Tailwind CSS tarzı ton ölçekleri (50–950) oluşturun.

Aracı aç