Dark mode web tasarımı: Karanlık tema uygulamaları ve dikkat edilecekler

Dark mode web tasarımı, kullanıcıya açık arka plan yerine koyu bir arayüz sunan tema tercihidir. Sistem düzeyinde dark mode desteği iOS, Android, Windows ve macOS'ta standart hale geldikçe web sitelerinin de bu tercihe yanıt vermesi beklentisi arttı.

Karanlık tema yalnızca estetik bir seçim değildir. OLED ekranlarda pil tasarrufu sağlar, göz yorgunluğunu azaltır ve belirli bağlamlarda daha yüksek okunabilirlik sunar. Ancak yanlış uygulandığında tam tersine görsel karmaşa ve düşük kontrast gibi sorunlara yol açar. Dark mode web tasarımında dikkat edilmesi gereken kritik noktalar aşağıda ayrıntılı ele alınmıştır.

⠀

CSS prefers-color-scheme ile otomatik dark mode

⠀

Modern tarayıcılar, kullanıcının işletim sistemi tema tercihini CSS media query aracılığıyla web sitesine iletir. Bu özellik prefers-color-scheme sorgusudur:

@media (prefers-color-scheme: dark) { body { background-color: #1a1a1a; color: #e5e5e5; } }

⠀

Bu yöntem, siteye gelen kullanıcının sistem tercihini sorgulamadan okur ve uygun temayı otomatik uygular. Tarayıcı desteği çok geniştir — tüm modern masaüstü ve mobil tarayıcılarda çalışır.

Ancak yalnızca media query kullanmak manuel geçişe izin vermez. Kullanıcının "aydınlık sistem, karanlık site" veya tersi gibi bir tercih yapmasına olanak tanımak için JavaScript toggle eklenmesi gerekir.

⠀

CSS custom properties ile tema değişkeni sistemi

⠀

⠀

⠀

Dark mode web tasarımında en sürdürülebilir yaklaşım, CSS custom properties (CSS değişkenleri) ile merkezi bir renk sistemi kurmaktır.

:root { --bg-primary: #ffffff; --text-primary: #111111; --accent: #e87830; } [data-theme="dark"] { --bg-primary: #1a1a1a; --text-primary: #e5e5e5; --accent: #f09050; }

⠀

Her renk değeri sabit yazılmak yerine değişkene atanır. Tema değiştiğinde yalnızca değişken değerleri güncellenir; bu sayede tüm bileşenler otomatik olarak güncellenir. Bu yapı bakım açısından büyük kolaylık sağlar ve yeni bileşen eklendikçe her iki tema için ayrı kod yazmaya gerek kalmaz.

Tam siyah yerine koyu gri kullanın. #000000 arka plan ve #ffffff metin kombinasyonu çok yüksek kontrast oluşturur; bu, uzun metinlerde göz yorgunluğuna neden olur. #1a1a1a veya #121212 gibi koyu gri tonlar daha doğal bir okuma deneyimi sağlar.

⠀

Görseller ve ikonlar dark mode'da nasıl davranır?

⠀

Aydınlık temada net görünen görseller karanlık temada sorun yaratabilir. En sık karşılaşılan iki senaryo:

Beyaz arka planlı PNG görseller: Aydınlık temada arka planla kaynaşır; dark mode'da beyaz kutu olarak öne çıkar. Çözüm: görsel arka planlarını saydam (transparent) tutun veya dark mode'da farklı görsel sürümleri kullanın.

İkonlar: Koyu renk ikonlar dark mode'da görünmez hale gelebilir. SVG ikonlarda currentColor kullanmak, ikonun metin rengiyle otomatik uyumlu olmasını sağlar. Bu yaklaşım hem kod miktarını azaltır hem de tema geçişlerini sorunsuz hale getirir.

CSS filtresi de hızlı bir geçici çözüm sunar:

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

⠀

⠀

Kullanıcıya manuel toggle seçeneği sunma

⠀

Kullanıcılar sistem temasından bağımsız olarak web sitesinin temasını değiştirmek isteyebilir. Bunun için birkaç satır JavaScript yeterlidir: toggle butonu tıklandığında data-theme özelliği html veya body elementine eklenir ya da kaldırılır. Kullanıcı tercihi localStorage'a kaydedilerek sayfa yenilemelerinde korunabilir.

Toggle butonunun tasarımında dikkat edilmesi gereken nokta: butonun her iki temada da görünür ve tıklanabilir olmasıdır. Ay/güneş ikonlu ince bir buton en yaygın ve tanıdık çözümdür.

⠀

Dark mode'un e-ticaret sitelerine uygunluğu

⠀

⠀

⠀

Ürün fotoğrafı ağırlıklı e-ticaret sitelerinde dark mode web tasarımı dikkatli değerlendirilmelidir. Çoğu ürün fotoğrafı aydınlık arka planla çekilmiştir ve dark mode'da bu görseller temadan kopuk görünür.

Teknoloji, oyun, müzik ekipmanları gibi kategorilerde karanlık tema güçlü bir marka kimliği sunabilir. Ancak giyim, gıda veya ev ürünleri gibi fotoğraf odaklı kategorilerde dark mode ürün görseli kalitesini ve dönüşüm oranını olumsuz etkileyebilir.

Pratik yaklaşım: tüm site için zorla dark mode yerine, kullanıcıya tercih sunun. Sistem tercihini varsayılan olarak alın, kullanıcı isterse değiştirsin. Bu yaklaşım hem erişilebilirlik standartlarına hem de kullanıcı özerkliğine uygundur.

Blakfy'nin web tasarımı projelerinde dark mode talebi geldiğinde önce renk sistemi değişken yapısıyla kurulur; görseller ve ikonlar için uyumluluk kontrolü yapılır, ardından kullanıcı toggle akışı eklenir.

⠀

⠀

Sık Sorulan Sorular

⠀

Dark mode SEO'yu etkiler mi?

Doğrudan bir etkisi yoktur. Google sayfanın görsel temasını sıralama faktörü olarak değerlendirmez. Ancak dark mode sayesinde artan kullanıcı memnuniyeti ve daha uzun oturumlar dolaylı olarak sıralamayı olumlu etkileyebilir.

Tüm kullanıcılar dark mode tercih eder mi?

Hayır. Araştırmalar kullanıcıların yaklaşık yarısının light mode'u tercih ettiğini göstermektedir. Bu nedenle dark mode'u zorunlu kılmak yerine kullanıcı tercihine bırakmak doğru yaklaşımdır.

WordPress siteme dark mode nasıl eklerim?

Birçok modern WordPress teması yerleşik dark mode desteğiyle gelir. Desteklemiyorsa CSS custom properties ve JavaScript ile tema değişkeni sistemi kurulabilir; ayrıca hazır eklentiler de mevcut, ancak performans etkisi değerlendirilmelidir.