Dark mode web tasarımı yalnızca arka planı karartmak değildir. Bu rehberde marka renklerini, okunabilir kontrastı ve kullanıcı tercihine duyarlı geçişi bozmadan nasıl planlayacağınızı adım adım ele alıyoruz.
Dark mode web tasarımı, birçok sitede hâlâ arka planı siyah yapıp metni beyaza çevirmekle sınırlı kalıyor. Oysa karanlık tema; marka paleti, metin kontrastı, bileşen durumları ve kullanıcının sistem tercihi birlikte düşünülmezse okunabilirliği düşürür, güveni zedeler ve geçiş anında “kırık arayüz” hissi yaratır.
Bu rehber, dark mode’u bir stil varyasyonu olarak değil; renk token’ları, kontrast kuralları ve tercih yönetimini içeren bir arayüz planı olarak ele alır. Amaç, light temayı bozmadan karanlık deneyimi tutarlı ve erişilebilir kılmaktır.
Dark Mode Web Tasarımı Neden Sadece Arka Plan Değiştirmek Değildir
Açık temada çalışan bir paleti doğrudan tersine çevirmek, çoğu markada sorun üretir. Canlı marka rengi karanlık zeminde parlar, gri metinler erir, ince çizgiler ve gölgeler görünmez hale gelir. Ayrıca kart, form, tablo ve bildirim gibi yüzeyler aynı “siyah”a düştüğünde hiyerarşi kaybolur.
İyi bir dark mode yaklaşımı üç soruya net cevap verir:
- Hangi yüzeyler arka plandan bir kademe yukarı çıkacak?
- Metin ve ikonlar hangi kontrast eşiğini karşılayacak?
- Kullanıcı tercihi nasıl algılanacak ve nasıl değiştirilebilecek?
Bu sorular yanıtlanmadan yapılan geçiş, “karanlık görünen ama yorucu” bir arayüz bırakır.
Marka Paletini Karanlık Temaya Taşımak
Marka rengi dark mode’da birebir kopyalanmamalıdır. Özellikle doygun ve parlak renkler karanlık zeminde göz yorucu hale gelir. Çözüm, markanın ana rengini korurken tonunu ve doygunluğunu temaya göre ayarlamaktır.
Pratik bir yol, paleti roller üzerinden tanımlamaktır:
- Primary: buton, vurgu ve seçili durumlar
- Surface: sayfa arka planı, kart, modal, yan panel
- Text: başlık, gövde, yardımcı metin, devre dışı metin
- Border / divider: ayırıcı çizgiler ve alan sınırları
- Status: başarı, uyarı, hata, bilgi
Her rol için light ve dark karşılığı ayrı tanımlanır. Böylece “mavi buton her yerde aynı hex” kuralı yerine “primary rol her temada tutarlı işlev görür” yaklaşımı kurulur. Kurumsal sitelerde bu disiplin, marka algısını koruyan kurumsal web tasarım kararlarının bir parçasıdır.
Yüzey katmanları oluşturun
Karanlık temada tek bir siyah ton yetmez. En az üç yüzey seviyesi düşünün: sayfa zemini, kart/panel ve yükseltilmiş katman (dropdown, modal, toast). Katmanlar arasındaki fark aşırı olmamalı; aksi halde arayüz “yamalı” görünür. Amaç gölgeye bağımlı kalmadan derinlik üretmektir.
Metin Kontrastı ve Okunabilirlik Kuralları
Dark mode’un en sık kırıldığı yer metin kontrastıdır. Saf beyaz (#FFFFFF) koyu zeminde uzun metinlerde ışıma hissi yaratabilir. Gövde metni için biraz yumuşatılmış açık gri; başlık için daha yüksek kontrastlı ton kullanmak okumayı rahatlatır.
Kontrol ederken şunlara bakın:
- Normal gövde metni ile arka plan arasında yeterli kontrast var mı?
- Yardımcı metin, placeholder ve disabled durumlar hâlâ okunabiliyor mu?
- Link rengi hem metinden ayrılıyor hem de aşırı parlamıyor mu?
- İkonlar metinle aynı hiyerarşide mi, yoksa kayboluyor mu?
Kontrastı yalnızca “göz kararıyla” bırakmayın. Bileşen kütüphanenizde metin rollerini netleştirin: primary text, secondary text, muted text. Her rol için dark ve light değerleri sabitleyin. Bu yaklaşım, web tasarım sürecinde tutarlı tipografi ve renk kararlarını sürdürülebilir kılar.
CTA ve durum renkleri
Buton ve uyarı renkleri dark mode’da ayrı test edilmelidir. Açık temada güçlü duran kırmızı, karanlık temada daha yumuşak bir tona çekilmezse “yanıyor” gibi algılanabilir. CTA’nın hem arka planla hem de üzerindeki metinle kontrastı korunmalıdır. İlk ekran mesajı ve eylem alanı için hero section tasarımı kararları, dark varyantta da aynı netlikte okunmalıdır.
Kullanıcı Tercihi ve Sistem Ayarları
Modern tarayıcı ve işletim sistemleri light/dark tercihini iletebilir. Dark mode planı bu tercihi yok saymamalıdır. En sağlıklı model genelde üç seçeneklidir:
- Sistem: cihaz ayarını izler
- Açık: kullanıcı light’ı zorunlu kılar
- Koyu: kullanıcı dark’ı zorunlu kılar
Yalnızca sistem ayarına bağlanmak, ofis ortamında veya ortak cihazda kullanıcıyı mahkûm edebilir. Yalnızca site içi anahtar sunmak da ilk ziyarette sistem tercihine duyarsız kalır. İkisini birleştirmek daha iyi bir deneyim üretir.
Tercih saklanırken dikkat edilmesi gerekenler:
- Seçim kalıcı olmalı; her ziyarette sıfırlanmamalı
- İlk boyamada yanlış temanın flaş etmesi (FOUC) engellenmeli
- Geçiş ani ve rahatsız edici olmamalı; abartılı animasyon da dikkat dağıtır
Tema Geçişini Tasarım ve Teknik Olarak Planlamak
Geçiş, yalnızca bir toggle ikonu eklemek değildir. Tasarım tarafında tüm bileşenlerin light/dark halleri tanımlanmalı; teknik tarafta renkler sabit hex dağınıklığından token yapısına taşınmalıdır.
Uygulanabilir bir plan şu adımlarla ilerler:
- Mevcut paleti rollerine ayırın (primary, surface, text, border, status).
- Her rol için dark karşılıklarını tasarım dosyasında onaylayın.
- CSS değişkenleri veya tasarım token’larıyla tek kaynak oluşturun.
- Bileşen kütüphanesini (buton, form, kart, tablo, menü) iki temada gözden geçirin.
- Gerçek sayfalarda; anasayfa, form, blog yazısı, sepet veya panel gibi yoğun ekranları test edin.
- Kullanıcı tercihi anahtarını ve sistem varsayılanını bağlayın.
KepezWeb tarafında dark mode, “sonradan eklenen süs” yerine arayüz sisteminin parçası olarak ele alınır. Böylece yeni sayfa veya bileşen eklendiğinde tema tutarlılığı bozulmaz.
Hangi öğeler sık unutulur?
- Form alanları, odak halkası ve hata mesajları
- Tablo çizgileri, zebra satırlar ve boş durum metinleri
- Harita, grafik ve üçüncü taraf widget arka planları
- Görsel üzerine binen metin katmanları ve gradient’ler
- Footer, sticky bar ve cookie/bilgi şeritleri
Bu alanlar unutulduğunda site “yarı dark mode” görünür; kullanıcı güveni düşer.
Light ve Dark Kararlarını Karşılaştırma Tablosu
| Karar alanı | Light temada dikkat | Dark temada dikkat |
|---|---|---|
| Arka plan | Beyaz/açık gri yüzey ayrımı | Tek siyah yerine katmanlı koyu tonlar |
| Marka rengi | Doygun renkler güçlü durabilir | Parlamayı azaltmak için ton ayarı gerekir |
| Gövde metni | Koyu gri çoğu zaman yeterlidir | Saf beyaz yerine yumuşak açık ton tercih edilir |
| Kenarlık | Açık gri çizgi görünür | Çok koyu çizgi kaybolur; biraz daha açık ton gerekir |
| Gölge | Derinlik için sık kullanılır | Gölge zayıflar; yüzey farkı daha kritik olur |
| Görseller | Parlak görseller doğal durur | Aşırı parlak görseller kontrastı bozabilir |
Yayın Öncesi Dark Mode Kontrol Listesi
Canlıya almadan önce aşağıdaki kontrolleri yapın:
- Ana sayfa, hizmet, blog ve form sayfalarında metin okunabilirliği kontrol edildi
- Buton, link, input ve focus durumları her iki temada test edildi
- Logo ve ikon setinin dark varyantı hazır; şeffaf veya koyu logolar kaybolmuyor
- Sistem tercihi, manuel açık ve manuel koyu senaryoları denendi
- Tema değişiminde içerik zıplaması veya renk flaşı oluşmuyor
- Mobilde status bar, sticky menü ve klavye açık form halleri incelendi
- Üçüncü taraf gömülü içerikler (video, harita, sohbet) uyumsuz bırakılmadı
Bu liste, “tasarımda güzel duruyor” ile “gerçek kullanımda rahat” arasındaki farkı kapatır.
Sıkça Sorulan Sorular
Her siteye dark mode eklemek gerekir mi?
Hayır. Okuma yoğun ürünler, paneller ve uzun oturumlu uygulamalarda faydası daha belirgindir. Vitrin odaklı kısa ziyaret sitelerinde öncelik her zaman net mesaj, hızlı yükleme ve tutarlı marka sunumudur. Dark mode, gerçek bir kullanıcı ihtiyacı veya marka kararıysa eklenmelidir.
Mevcut light paleti otomatik tersine çevirmek yeterli midir?
Genellikle hayır. Otomatik invert, marka renklerini, görselleri ve durum mesajlarını bozabilir. Rollere dayalı token’lar ve bileşen bazlı kontrol daha güvenli sonuç verir.
Dark mode SEO’yu doğrudan etkiler mi?
Arama motorları temanın açık veya koyu olmasından ziyade erişilebilirlik, kullanılabilirlik ve teknik kaliteye bakar. Kötü kontrastlı bir dark mode kullanıcı deneyimini bozarsa dolaylı olumsuz etki oluşabilir; iyi kurgulanmış bir tema ise deneyimi iyileştirir.
Kullanıcı tercihi nasıl sunulmalı?
Sistem varsayılanını destekleyin ve kullanıcıya açık/koyu seçeneği verin. Tercihi hatırlayın. Anahtarı gizli bir yere gömmeyin; header veya hesap/ayar alanında bulunabilir olsun.
Logo dark mode’da nasıl yönetilmeli?
Tek logo dosyasına güvenmeyin. Koyu zeminde kaybolan versiyonlar için açık renkli veya monokrom alternatif hazırlayın. Favicon ve e-posta imzası gibi uzantıları da aynı set içinde düşünün.
Dark mode web tasarımını marka paleti, kontrast ve tercih yönetimiyle birlikte planlamak istiyorsanız KepezWeb ekibiyle ihtiyaçlarınıza uygun bir arayüz yaklaşımı konuşabilirsiniz. Projenizi kısaca anlatmak için teklif al sayfasından bize ulaşabilirsiniz.
