Karanlık Mod Web Tasarımı: Trendden Fazlası

Saat gece 11. Müşterin yatağında, telefonu karanlık moda ayarlı, web siteni açıyor. Beklediği koyu yüzey yerine ekranına bembeyaz bir sayfa bir projektör gibi çarpıyor. Gözlerini kısıyor – ve sekmeyi kapatıyor.

Karanlık mod web tasarımı tam burada başlar: estetikte değil, kullanıcının bulunduğu ortama duyulan saygıda. iOS ve Android karanlık modu sistem genelinde getirdiğinden beri, bu özellik bir oyuncaktan bir beklentiye dönüştü. Hannover'deki Storyable ekibi olarak neredeyse her web tasarım projesinde aynı soruyla karşılaşıyoruz: Buna ihtiyacımız var mı – varsa kontrastı, okunabilirliği ve dönüşümü kaybetmeden nasıl doğru yaparız? Bu rehber sana pratikten gelen yanıtları veriyor; renk paletleri, kod mantığı ve en sık temizlediğimiz hatalarla.

Karanlık Mod Neden Sadece Koyu Bir Trendden Fazlası?

Karanlık mod, tasarımcılar şık buldu diye ortaya çıkmadı. Gerçek sorunları çözer. Android Authority'nin sıkça alıntılanan bir anketi, kullanıcıların %80'inden fazlasının bir uygulama karanlık mod sunduğu anda onu aktif ettiğini gösterdi. Bu bir niş değil – bu çoğunluk.

Bu rakamı üç somut neden besliyor:

• Az ışıkta gözün rahatlaması: Beyazdan oluşan parlak bir duvar, karanlık bir ortamda agresif biçimde parlar. Koyu yüzeyler mutlak parlaklığı ve dolayısıyla yorgunluğu azaltır – özellikle akşam ve gece
• OLED ekranlarda pil: OLED ve AMOLED ekranlarda siyah pikseller tamamen kapanır. Google, YouTube uygulaması örneğinde bunun parlaklığa göre %60'a varan enerji tasarrufu sağladığını gösterdi. Klasik LCD'de bu geçerli değildir – orada arka aydınlatma sürekli yanar
• Odak ve premium algı: Koyu bir arayüz içeriği, görselleri ve vurgu renklerini öne çıkarır. Yayın platformlarının, kod editörlerinin ve finans uygulamalarının varsayılan olarak koyuyu tercih etmesi tesadüf değil

Önemli olan ayrım şu: Karanlık mod kendi başına bir amaç değildir. Birinin iki dakika ziyaret ettiği bir mali müşavir landing page'i ona nadiren ihtiyaç duyar. Çalışanların günde sekiz saat içinde çalıştığı bir web uygulaması ise muazzam fayda sağlar. Soru asla "trend evet mi hayır mı" değildir; soru şudur: Biri siteni ne kadar süre ve hangi ortamda kullanıyor? Bu tür kararların ardındaki psikolojiyi derinlemesine merak edenler, psikolojik web tasarımı rehberimizde bulabilir – karanlık modun modern bir web sitesinin bütünü içinde nereye oturduğunu ise 2026 web tasarım rehberimiz çerçeveler.

Renk Kuralları: Karanlık Mod Neden Ters Çevrilmiş Aydınlık Mod Değildir?

En sık yapılan acemi hata aynı zamanda en pahalısıdır: Aydınlık tasarımı alıp renkleri ters çevirmek. Beyaz siyah olur, siyah beyaz olur – bitti. Sonuç neredeyse her zaman kullanılamaz. Karanlık mod kendi fiziksel ve tasarımsal yasalarına uyar; bu yasaları görmezden gelen bir tasarım, koyu görünür ama profesyonel görünmez. Aşağıdaki dört kural, karanlık modu bir filtre olmaktan çıkarıp gerçek bir tasarım sistemine dönüştüren temeldir – ve her birini atladığında kullanıcı bunu bilinçaltında fark eder.

Kural 1: Saf siyah yok

Saf siyah (#000000) mantıklı görünür ama yanlıştır. #000 ile bembeyaz metin (#FFF) arasındaki kontrast o kadar uçtur ki, beyaz harfler kenarlarda titriyormuş gibi görünür – halation denen, gözü yoran ve okumayı zorlaştıran bir etki. Material Design bu yüzden temel koyu yüzey olarak #121212yi önerir: daha sakin duran ve – en önemlisi – derinliği ancak mümkün kılan çok koyu bir gri.

Kural 2: Gölgeyle değil, parlaklıkla derinlik

Aydınlık modda katmanları gölgeyle ayırırsın. Siyahın üzerinde gölge işe yaramaz – görünmez bile. Karanlık modda ilke tersine döner: Bir öğe ne kadar "yukarıda" duruyorsa, yüzeyi o kadar açık olur. Arka planın üzerindeki bir kart, gölgeli ve daha koyu değil; temel yüzeyden birkaç yüzde daha açıktır. Bu yükseklik (elevation) mantığı, düz görünmeyen bir karanlık modun anahtarıdır.

Kural 3: Renkleri doygunluktan arındır

Aydınlık modda parlak görünen canlı, doygun renkler koyu zeminde rahatsız edici biçimde "titrer" ve gözü zorlar. Çözüm: vurgu renklerini karanlık mod için doygunluktan arındırıp hafifçe açmak. Doygun marka mavin, karanlık modda daha yumuşak ve daha açık bir tona dönüşür. Bu markaya ihanet değil – çeviridir. Rengin algı ve marka etkisine ne kadar oynadığını pazarlamada renk sembolizmi yazımızda gösteriyoruz.

Kural 4: Kontrast pazarlık konusu değil

İş burada yasal hale gelir. WCAG yönergeleri normal metin için en az 4,5:1, büyük metin için 3:1 kontrast oranı ister – ve bu, karanlık modda da aydınlık moddaki kadar geçerlidir. Koyu gri zemin üzerinde açık gri metin zarif görünebilir ama birçok kişi için okunamaz. Erişilebilirlik birçok sağlayıcı için artık bir stil meselesi değil, bir yükümlülük. Detayları erişilebilirlik ve BFSG yazımızda bulabilirsin.

Karanlık Modda Tipografi: Daha İnce Yazı, Daha Çok Boşluk

Neredeyse herkesin gözden kaçırdığı bir ayrıntı: Koyu zemin üzerindeki açık yazı, açık zemin üzerindeki koyu yazıdan optik olarak daha kalın görünür. Aynı font, aynı boyut – ama karanlık modda harfler daha kalın ve sıkışık görünür.

Temiz bir karanlık mod web tasarımı için sonuçlar:

• Yazı kalınlığını hafifçe azalt: Bold bir başlık karanlık modda aynı görsel etkiyi yakalamak için bir kademe hafif (Semibold) verilebilir
• Satır aralığını artır: Satırlar arasında biraz daha fazla boşluk, metnin sıkışık bir kütleye dönüşmesini engeller
• Bembeyazdan kaçın: Gövde metni için #FFFFFF yerine #E0E0E0 gibi hafifçe kısılmış bir beyaz – kontrastı okunabilirlik sınırının altına düşmeden rahat bir seviyeye çeker

Yazı seçimi ve kalınlığının bir sayfanın etkisini ne kadar yönettiğini web tipografisi ve dönüşüm yazımızda derinlemesine ele alıyoruz. Karanlık modda bu kaldıraç daha da önemli hale gelir.

Teknik Uygulama: JavaScript hilesi değil, prefers-color-scheme

Sağlam zanaatin amatör işçilikten ayrıldığı yer burası. İyi bir karanlık mod web tasarımı önce kullanıcının sistem ayarına saygı duyar – sonra ona manuel geçiş imkânı verir.

Adım 1: Sistem ayarını oku

Tarayıcı kullanıcının tercihini zaten biliyor. prefers-color-scheme CSS medya sorgusuyla bunu hiç JavaScript olmadan okursun:

• Kullanıcı cihazını karanlık moda almışsa, site otomatik olarak koyu temayı sunar
• Bu, bir tıklamadan sonra değil, ilk render'da olur – aydınlık bir saniye yok, göz kamaşması yok

Adım 2: Sabit renkler değil, tasarım token'ları

Biz Storyable'da karanlık mod için ikinci bir stil dosyası yazmayız. Bunun yerine CSS değişkenleriyle (tasarım token'ları) çalışırız: --color-background, --color-text, --color-surface. Aydınlık modda açık değerler, karanlık modda koyu değerler alırlar. Bileşenlerin kendisi yalnızca değişkeni bilir, somut rengi değil. Bu, kodu bakımı kolay tutar ve yeni bir öğenin her iki modda da otomatik olarak doğru görünmesini sağlar.

Adım 3: Manuel değiştirici – ve FOUC sorunu

Birçok kullanıcı sistem ayarından bağımsız seçim yapmak ister. Bu yüzden bir tema değiştirici şarttır. Neredeyse her hazır şablon çözümünün düştüğü tek teknik tuzak: Flash of Unstyled Content (FOUC). Sayfa önce aydınlık yüklenir, sonra JavaScript ile koyuya atlar – çirkin bir parlama. Bu, kaydedilmiş tercihin ilk boyamadan önce uygulanmasıyla temiz biçimde çözülür. İşte tam bu tür ayrıntılar, neden hazır widget'lar yerine Nuxt.js ile özel kod kullandığımızın sebebidir – "ucuz görünür" ile "premium görünür" arasındaki farkı bunlar belirler.

Değiştirme anındaki animasyonlu geçiş ise detay sevgisinin kendini gösterdiği o andır. Sert bir sıçrama yerine yumuşak bir geçiş değerli durur – bu tür mikro anları performanstan ödün vermeden nasıl tasarladığımızı Framer Motion ile mikro etkileşimler yazımızda okuyabilirsin.

Karanlık Mod ve Dönüşüm: Ne Zaman Yardımcı Olur, Ne Zaman Zarar Verir?

Şimdi işte gerçekten önemli olan soru: Koyu bir web sitesi daha mı iyi satar? Dürüst yanıt: sektöre, içeriğe ve bağlama bağlıdır.

Karanlık mod şu durumlarda güçlü etki yapar:

• Teknoloji, oyun, yayın, kripto: Burada koyu adeta sektör standardıdır ve modernlik sinyali verir
• Panolar ve uzun süre kalınan e-ticaret siteleri: Kullanıcıların çok zaman geçirdiği yerde göz konforu doğrudan memnuniyete oynar
• Ürün görselleri ve görsel içerik: Koyu zeminde fotoğraflar ve vurgu renkleri daha yoğun parlar – görsel markalar için gerçek bir avantaj

Karanlık mod şu durumlarda zarar verebilir:

• Güven ve sağlık temaları: Doktor muayenehaneleri, hukuk büroları, sigortalar çoğu zaman ciddiyet ve şeffaflık yansıtan açık, ferah yüzeylerden fayda görür
• Metin ağırlıklı satış sayfaları: Uzun satış metinleri birçok kişi tarafından açık zeminde daha hızlı okunur
• Kötü kurgulanmış hero bölümleri: Koyu bir arka plan zayıf kontrastları affetmez – üç saniyede dönüştüren hero bölümü karanlık modda evleviyetle yerine oturmalı

Doğru strateji bu yüzden neredeyse hiç "yalnızca koyu" değil, seçim özgürlüğüdür: sistem tercihine saygı duyan, opsiyonel karanlık modlu iyi düşünülmüş bir aydınlık varsayılan (veya tersi). Böylece zevkini kimseye dayatmazsın – koyuyu tercih eden %80'i kazanır, diğerlerini kaybetmezsin.

Karanlık Modunu Lansmandan Önce Nasıl Test Edersin?

Bir karanlık mod web tasarımı ancak gerçek cihazlarda gerçek koşullar altında test edildiğinde – yalnızca tasarımcının tarayıcı penceresinde değil – tamamlanmış olur. Çoğu kaza tam burada doğar, çünkü koyu bir tema sanılandan çok daha fazla yerden "sızar".

Storyable'da her lansmandan önce bu kontrol listesini işliyoruz:

• Her iki modu da sistematik gez: Her sayfa, her durum, her form bir kez açık bir kez koyu. Hata sayfalarını ve boş durumları unutma
• Gömülü içerikleri kontrol et: Haritalar, videolar, PDF görüntüleyiciler, çerez bannerları ve harici widget'lar temanı çoğu zaman görmezden gelir – ayrıca uyarlanmaları veya çerçevelenmeleri gerekir
• Beyaz kenarlı görselleri avla: Şeffaf olmayan arka planlı her logo, ikon veya ürün görseli karanlık modda parlak bir kutu olarak yanar. Şeffaf PNG'ler veya SVG'ler şarttır
• Kontrastı tahmin etme, ölç: Her metin-arka plan kombinasyonunu 4,5:1 WCAG sınırına karşı bir araçla kontrol et, gözle değil
• Güneş ışığında test et: Karartılmış ofiste kalibre monitörde harika görünen şey, dışarıda ucuz bir telefonda tamamen kaybolabilir
• Geçiş anını izle: Sayfa yüklenirken kısa süre aydınlık parlıyor mu? O zaman FOUC sorunu çözülmemiştir

Bu emek çok gibi görünür – ama düzgün kurulmuş bir token sistemiyle yönetilebilir, çünkü renkleri yüz ayrı noktada değil merkezi olarak düzeltirsin. Karanlık modu mevcut bir tasarımın üzerine sonradan giydirenler ise test ede ede çıldırır.

En Sık Yapılan 6 Karanlık Mod Hatası

Hannover'deki Storyable denetimlerimizden, tekrar tekrar karşımıza çıkan tuzakları biliyoruz:

1. Arka plan olarak saf siyah – çok sert kontrast, halation, ucuz görünüm. #121212 veya koyu gri kullan
2. Aydınlık tasarımı düpedüz ters çevirmek – gölgeler kaybolur, renkler titrer, beyaz arka planlı görseller sayfada pul gibi parlar
3. Çok düşük metin kontrastı – gri zemin üzerinde gri yazı WCAG sınırının altında kalır ve kullanıcıları dışlar
4. Unutulan öğeler – çerez bannerı, bir gömülü içerik veya bir PDF görüntüleyici bembeyaz kalır ve koyu yüzeyde delik açar
5. Flash of Unstyled Content – sayfa yüklenirken koyu tema devreye girmeden önce kısa süre aydınlık parlar
6. Şeffaf olmayan görseller – beyaz arka planlı logo ve ikonlar karanlık modda parlayan kutulara dönüşür

Bu noktaların her biri tek başına önemsiz görünür – ama toplamda, koyu modunun iyi düşünülmüş bir ürün gibi mi yoksa sonradan yapıştırılmış bir filtre gibi mi göründüğüne karar verirler.

Sonuç: Karanlık Mod Web Tasarımı Bir Düğme Değil, Bir Karardır

İyi bir karanlık mod web tasarımı bir düğmeyi siyaha çevirmekle değil, bir kararla başlar: Bu sayfayı kim, ne kadar süre ve hangi ortamda kullanıyor? Yanıt karanlık moddan yana ise, o zaman lütfen doğru yap – saf siyah yerine koyu gri, doygunluğu azaltılmış renkler ve gölge değil parlaklıkla derinlik, WCAG uyumlu kontrast, temiz bir prefers-color-scheme kurulumu ve kullanıcına seçim özgürlüğü. Onu sonradan eklenen bir oyuncak gibi ele alan, titreyen metinler, okunamaz yüzeyler ve ucuz bir izlenim üretir. Onu iyi düşünülmüş bir renk sisteminin parçası olarak anlayan ise, günün her saatinde ve her cihazda ikna eden bir site kurar. Storyable'da tam olarak böyle çalışıyoruz: karanlık mod, markanın karanlığa çevrilmesidir – zıttı değil.

Cagri Ersöz

Karanlık mod, ama doğru: Web siten için karanlık mod değer mi?

Web sitene bir karanlık mod eklemeyi mi düşünüyorsun – yoksa titreyen ve ucuz duran birine mi sinirleniyorsun? 30 dakikalık bir ilk görüşmede trafiğine, sektörüne ve marka renklerine bakar, iyi düşünülmüş bir karanlık mod web tasarımının senin için değip değmeyeceğini ve nasıl olacağını gösteririz. Doğrudan Hannover'den, hazır şablon ödünü değil özel kod ile.

Ücretsiz web tasarım kontrolünü hemen al