Dark mode web tasarımı, kullanıcı arayüzlerinde giderek standart hale gelen bir tasarım tercihi olmaktan çıkıp, 2026’da neredeyse her ciddi web projesinin gündeminde yer alan teknik bir gereklilik haline geldi. Sistem düzeyinde dark mode kullanan kullanıcı oranının %42’ye ulaştığı göz önüne alındığında, bu tercihi yok sayan web siteleri kullanıcılarının yarısına yakınına suboptimal deneyim sunuyor. Bu rehberde dark mode’un nasıl uygulandığını, tasarım ilkelerini ve teknik detaylarını ele alıyoruz.
Dark Mode Neden Bu Kadar Popüler?
Dark mode’un yaygınlaşmasının üç temel nedeni var: göz yorgunluğunu azaltma (özellikle gece kullanımında), OLED ekranlarda pil tüketimini düşürme (siyah pikseller OLED’de güç tüketmez) ve estetik tercih. Apple’ın 2019’da macOS Mojave ile dark mode’u sistem düzeyine taşıması, sonrasında Android ve Windows’un takip etmesiyle kullanıcı beklentisi kökten değişti.
Dark Mode Uygulama Yöntemleri
Yöntem 1: CSS prefers-color-scheme (Otomatik)
En iyi kullanıcı deneyimini sunan yöntem, sistemin dark mode tercihini otomatik algılamaktır. CSS media query ile uygulanır:
:root {
--bg-color: #ffffff;
--text-color: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #e0e0e0;
}
}CSS custom properties (değişkenleri) kullanmak, tema geçişini merkezi ve yönetilebilir kılar. Tüm renkler değişken üzerinden tanımlandığında, dark mode geçişi yalnızca bu değişkenlerin güncellenmesiyle gerçekleşir.
Yöntem 2: Kullanıcı Kontrollü Toggle
Sitede bir dark/light mode toggle butonu sunmak, kullanıcıya manuel kontrol verir. JavaScript ile body’e dark-mode class’ı eklenir; localStorage’a tercih kaydedilerek sonraki ziyarette hatırlanır. Sistem tercihini varsayılan alıp üzerine kullanıcı kontrolü eklemek en iyi yaklaşımdır.
Yöntem 3: CSS color-scheme Özelliği
color-scheme: dark; bildirimi, tarayıcının form elemanları, kaydırma çubukları ve sistem arayüzü bileşenlerini otomatik dark mode’a geçirmesini sağlar. İçerik renkleriyle birlikte kullanıldığında tam tutarlı bir dark deneyim sunar.
Dark Mode Tasarım İlkeleri
Saf Siyah Kullanmayın
#000000 saf siyah arka plan, metin ile aşırı kontrast yaratır ve gözü yorar. Material Design ve Apple Human Interface Guidelines, dark mode arka planı için #121212 ile #1e1e1e arasındaki tonları öneriyor. Bu tonlar göze daha yumuşak gelirken yeterli kontrastı sağlıyor.
Renk Doygunluğunu Düşürün
Light mode’da kullandığınız canlı renkler dark arka plan üzerinde çok yoğun görünür ve gözü yorar. Brand renklerinizin doygunluğunu %10-20 azaltın, parlaklığını artırın. Örneğin #0066cc yerine dark mode’da #4d9fff kullanmak daha dengeli bir görüntü sağlar.
Elevation için Renk Kullanın
Light mode’da gölgeler (box-shadow) derinlik hissi yaratır; dark mode’da gölgeler görünmez olur. Dark tasarımda derinliği renk tonu farkıyla ifade edin: alt katman #121212 iken üst katman kartlar #1e1e1e veya #252525 olabilir. Material Design’ın dark mode elevation sistemi bu ilkeyi sistematize ediyor.
Kontrast Oranını Kontrol Edin
WCAG 2.1 AA standardı her iki modda da minimum 4,5:1 kontrast oranı gerektirir. Dark mode tasarımcıların sık yaptığı hata: light mode’da geçen kontrast oranlarının dark mode’da yetersiz kalması. WebAIM Contrast Checker ile her renk kombinasyonunu ayrı ayrı test edin.
Görseller ve Dark Mode
Beyaz arka plan üzerine tasarlanmış görseller dark mode’da “yüzen” bir görünüm oluşturur. Çözümler:
- Şeffaf arka planlı PNG veya SVG görseller kullanın
- picture elementi ve media query ile dark mode’a özel görseller sunun
- CSS filter: brightness(0.8) ile görsellerin parlaklığını dark mode’da düşürün
- Logo ve ikonlarda CSS currentColor kullanarak tema rengine duyarlı vektör grafikler oluşturun
WordPress’te Dark Mode Ekleme
WordPress sitelerine dark mode eklemek için üç yaklaşım mevcut: tema desteği (temada built-in dark mode varsa toggle otomatik gelir), eklenti (WP Dark Mode veya benzeri eklentiler kod gerektirmeden dark mode toggle ekler) ve özel CSS (Elementor veya Custom CSS alanından manuel dark mode stilleri yazılır). Üçüncü yöntem en fazla kontrol sunar ancak her öğeyi ayrı ayrı test etmeyi gerektirir.
Dark Mode Test Kontrol Listesi
| Test Edilecek Öğe | Kontrol Noktası |
|---|---|
| Metin okunabilirliği | Min. 4,5:1 kontrast oranı |
| Görseller | Beyaz arka plan sorunu yok |
| Form alanları | Placeholder ve border görünür |
| Butonlar | Hover ve focus durumu belirgin |
| Link renkleri | Ziyaret edilen/edilmemiş ayrımı korunuyor |
| Üçüncü taraf embed | Harita, video, widget uyumluluğu |
Sonuç
Dark mode web tasarımı, kullanıcı deneyimini iyileştiren ve 2026’da standart beklenti haline gelen bir özelliktir. prefers-color-scheme media query ile sistem tercihini otomatik algılamak, en az sürtünmeli yaklaşımdır. Tasarım sürecinde doğru renk tonları, kontrast kontrolü ve görsel uyumluluk sağlandığında dark mode, sitenize hem estetik hem teknik değer katar. Web sitenize dark mode entegrasyonu için Wordline Agency ile iletişime geçin.
Dark Mode için Adım Adım Uygulama Planı
Dark mode eklemek karmaşık görünse de doğru sırayla yaklaşıldığında yönetilebilir bir süreçtir. Aşağıdaki adımlar küçük-orta ölçekli web siteleri için optimize edilmiştir.
- Renk değişkenlerinizi CSS custom properties olarak tanımlayın: Tüm renkleri
:rootaltında CSS değişkeni olarak yapılandırın (--color-bg,--color-text,--color-accent). Bu, tek noktadan tema değiştirmeyi mümkün kılar. - Dark mode renk paletini belirleyin: Arka plan için #121212–#1e1e1e aralığı, metin için #e0e0e0–#ffffff, vurgu renkleri için doygunluğu %15–20 azaltılmış versiyonlar hazırlayın.
- prefers-color-scheme media query’yi ekleyin:
@media (prefers-color-scheme: dark)altında:rootdeğişkenlerini dark değerleriyle override edin. Sistem tercihini otomatik algılar. - Manuel toggle ekleyin: Kullanıcının sistem tercihinden bağımsız mod seçebilmesi için JavaScript toggle butonu ekleyin. Tercihi
localStorage‘a kaydedin; sayfa yenilemelerinde korunur. - Görselleri dark mode için optimize edin: Beyaz arka planlı PNG’ler için
pictureelementi veya CSSfilter: brightness(0.9)uygulayın. - Kontrast testini yapın: WebAIM Contrast Checker ile her metin-arka plan kombinasyonunu test edin. 4,5:1 oranının altındaki kombinasyonları düzeltin.
- Üçüncü taraf embed’leri kontrol edin: Google Maps, YouTube embed, form widgetları dark modda beklenmedik görünüm sergileyebilir. Her birini ayrı ayrı test edin.
Sık Sorulan Sorular
Dark mode SEO’yu etkiler mi?
Doğrudan SEO etkisi yoktur — Google içeriği indexlerken renk şemasına bakmaz. Ancak dolaylı etkisi olumludur: dark mode tercihi olan kullanıcılar için sunulan iyi deneyim, sayfada kalma süresini artırır ve hemen çıkış oranını düşürür. Bu davranışsal sinyaller dolaylı olarak sıralamaya katkı sağlar. Ek olarak, dark mode uygulamasının getirdiği CSS değişken yapısı ve temiz kod organizasyonu sayfa performansını da iyileştirebilir.
Dark mode mu, light mode mu varsayılan olmalı?
Genel öneri: sistem tercihine uymak. prefers-color-scheme ile kullanıcının işletim sistemindeki tercih otomatik algılanır. Belirli bir sektörde (finans, hukuk, sağlık) light mode daha güvenilir ve resmi algılanır; bu sektörlerde light mode varsayılan tercih edilebilir. Yaratıcı ajans, teknoloji ve oyun sektörlerinde dark mode güçlü marka ifadesi sunar. Hangisinin varsayılan olduğundan bağımsız olarak her zaman manuel geçiş seçeneği sunun.
Dark mode mobilde nasıl test edilir?
iOS’ta Ayarlar → Ekran ve Parlaklık → Karanlık; Android’de Ayarlar → Ekran → Koyu tema ile sistem genelinde dark mode aktive edilir. Chrome DevTools’ta da test yapılabilir: F12 → Rendering sekmesi → Emulate CSS media feature: prefers-color-scheme → dark seçeneği. Gerçek cihaz testini atlamamak kritiktir — özellikle OLED ekranlı cihazlarda renk doğruluğu önemli farklılıklar gösterebilir.
Mevcut WordPress temama dark mode nasıl eklenir?
Üç yol mevcuttur. En kolay yol: “WP Dark Mode” eklentisini kurmak — kod yazmadan otomatik dark mode toggle ekler, ancak tüm temalarla uyumlu değildir. İkinci yol: temanın style.css dosyasına prefers-color-scheme: dark media query ile dark renk değişkenleri eklemek. En ileri yol: child theme oluşturup CSS değişken altyapısı kurmak — en fazla kontrol ve esneklik sağlar. Seçim yapılırken temizlik ve bakım kolaylığı gözetilmelidir.