İyi bir dark mode tasarım, açık temanın renklerini ters çevirmekten çok daha fazlasıdır. Arka planı siyah yapıp metni beyaza çekmek ilk bakışta çalışıyormuş gibi görünür; ama gerçek hayatta saf siyah üzerinde saf beyaz, gözü yoran bir parıltı (halation) yaratır, gölgeler kaybolur ve markanın renkleri çiğleşir. Koyu tema, kendi mantığı, kendi gri paleti ve kendi kontrast kurallarıyla yeniden düşünülmesi gereken ayrı bir tasarım sistemidir. Bu yazıda doğru gri tonlarını, okunabilir kontrast oranlarını ve göz yorgunluğunu azaltan renk seçimlerini pratik örneklerle anlatıyorum.
Neden saf siyah (#000000) iyi bir başlangıç değil?
Çoğu kişinin ilk içgüdüsü arka planı #000000 yapmaktır, ama bu birkaç soruna yol açar. Saf siyah üzerinde saf beyaz metin aşırı kontrast üretir; özellikle OLED ekranlarda parlak harflerin kenarları bulanıklaşır ve uzun okumalarda göz yorulur. Ayrıca saf siyah bir zemin üzerinde gölge (shadow) görünmez olur, bu yüzden katmanları (kart, modal, menü) birbirinden ayırmak için kullanabileceğin en güçlü araçlardan birini kaybedersin.
Bunun yerine çok koyu bir gri kullan. Google'ın Material tasarım rehberi yıllardır taban yüzey rengi olarak yaklaşık #121212 önerir; çünkü bu ton üzerinde yarı saydam beyaz katmanlar bindirerek yükseklik (elevation) hissi yaratabilirsin. Pratik bir başlangıç paleti şöyle olabilir:
--bg: #121212; /* en alt zemin */
--surface-1: #1e1e1e; /* kartlar */
--surface-2: #242424; /* yükseltilmiş kartlar, menüler */
--surface-3: #2c2c2c; /* modallar, popoverlar */
--text: #e6e6e6; /* ana metin (saf beyaz değil) */
--text-dim: #a0a0a0; /* ikincil metin */Dikkat edersen yüzey rengi katman yükseldikçe açılıyor. Koyu temada ışık yukarıdan geldiği için yüksek yüzeyler daha aydınlık görünür; bu, gerçek dünyadaki ışık mantığını taklit eder ve arayüzü doğal kılar.
Metin için saf beyaz yerine yumuşatılmış beyaz
Ana metni #ffffff yapma. Koyu zemin üzerinde saf beyaz, harflerin etrafında titreşim (vibration) etkisi yaratır. Bunun yerine %85–90 opaklıkta beyaz ya da #e6e6e6 civarı bir ton kullan. Material kılavuzu metin opaklıklarını şu şekilde ölçeklendirir:
- Yüksek vurgu (ana metin): beyazın %87'si
- Orta vurgu (ikincil metin, etiketler): beyazın %60'ı
- Devre dışı (pasif öğeler): beyazın %38'i
CSS'te bunu opaklık yerine doğrudan renk olarak yazmak daha öngörülebilirdir, çünkü rgba ile beyazı şeffaflaştırırsan altındaki yüzey rengi sonucu değiştirir. İkisini de kullanabilirsin, ama bir projede tutarlı kal.
Kontrast oranı: WCAG sınırlarını koru
Dark mode tasarımda en sık yapılan hata, kontrastı estetik uğruna düşürmektir. Soluk gri metin koyu zeminde "şık" görünebilir ama okunmaz. WCAG 2.1 erişilebilirlik standardı net eşikler koyar:
- Normal metin: en az 4.5:1 kontrast oranı
- Büyük metin (18pt / 24px üstü ya da 14pt bold): en az 3:1
- Arayüz bileşenleri (buton kenarı, ikon, form alanı sınırı): en az 3:1
Örnek vereyim: #121212 zemin üzerinde #e6e6e6 metnin kontrast oranı yaklaşık 13:1'dir; bu fazlasıyla yeterli. Ama ikincil metin için #757575 kullanırsan oran 4.6:1'e iner; sınırda ama geçer. #5a5a5a seçersen 3:1'in altına düşer ve normal metin için kullanılamaz. Tarayıcının geliştirici araçlarındaki kontrast denetçisi ya da WebAIM Contrast Checker gibi bir araçla her renk çiftini doğrula.
Doygun renkleri köreltmek
Açık temada harika görünen canlı, doygun renkler (parlak mavi, kırmızı, yeşil) koyu zeminde "yüzer" ve titrer. Bunun nedeni, yüksek doygunluk ile koyu arka plan arasındaki büyük parlaklık farkının gözü zorlamasıdır. Çözüm: dark mode için renklerin doygunluğunu düşür, parlaklığını biraz artır. Yani daha pastel, daha "tozlu" tonlar kullan.
/* Açık temadaki vurgu rengi */
--accent-light: #0066ff; /* canlı mavi */
/* Dark mode için yumuşatılmış hali */
--accent-dark: #5b9aff; /* daha açık, daha az doygun */Aynı kural marka renkleri için de geçerli. Markanın ana rengi çok koyuysa (örneğin lacivert), dark mode'da zeminle karışıp okunmaz hale gelir; bu durumda erişilebilirlik için daha açık bir varyant türetmen gerekir. Renk tokenlarını tema bazlı tutmak (her renk için açık ve koyu bir değer) bu işi yönetilebilir kılar.
Yükseklik, gölge ve kenarlıklar
Açık temada katmanları gölgelerle ayırırsın. Koyu temada gölge zayıf çalışır çünkü zemin zaten karanlıktır. Bunun yerine iki tekniği birlikte kullan: daha açık yüzey rengi (yukarıdaki katman ölçeği) ve ince bir kenarlık. Çok düşük opaklıkta beyaz bir kenarlık, kartı zeminden zarifçe ayırır:
.card {
background: var(--surface-1);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
}Gölgeyi tamamen atma; sadece daha yumuşak ve daha geniş yayılımlı yap, böylece sertlik yerine derinlik hissi verir. Koyu temada amaç dramatik gölge değil, hafif bir ayrım.
Görseller ve geçiş
Fotoğraflar ve illüstrasyonlar koyu zeminde fazla parlak kalabilir; çok hafif bir karartma (filter: brightness(0.9)) ya da içerik resimlerine ince bir kenarlık göz konforunu artırır. Saydam PNG logoları, özellikle koyu renkli olanları, dark mode'da kaybolur; bu yüzden logonun açık bir varyantını hazırla.
Son olarak temalar arası geçişi ele al. Kullanıcının seçimini hatırla (örneğin localStorage), sistem tercihini de prefers-color-scheme ile başlangıç değeri olarak oku. Geçiş anının "yanıp sönmemesi" için tema sınıfını sayfa ilk render olmadan, mümkünse <head> içindeki küçük bir betikle uygula.
Sık Sorulan Sorular
Dark mode gerçekten gözü daha az yorar mı?
Bağlama göre değişir. Karanlık bir ortamda koyu tema gözü rahatlatır çünkü ekranın toplam parlaklığı düşer. Ancak aydınlık bir ortamda koyu tema, gözbebeğini açtırarak metin kenarlarının daha bulanık algılanmasına yol açabilir. En iyisi kullanıcıya seçim sunmak ve sistem tercihine saygı göstermektir.
Dark mode için ayrı bir renk paleti mi gerekir?
Evet, en azından vurgu ve metin renkleri için. Açık temadaki renkleri olduğu gibi taşımak kontrast ve doygunluk sorunları yaratır. Renk tokenlarını her tema için ayrı değerlerle tanımlamak en sürdürülebilir yaklaşımdır.
OLED ekranlar için saf siyah kullanmalı mıyım?
Pil tasarrufu için saf siyah piksel kapatır, bu doğru. Ama arayüzün tamamını #000000 yapmak okunabilirlik ve katman ayrımını bozar. Dengeli bir yaklaşım: ana zemini #121212 gibi çok koyu tut, gerçekten siyah istediğin yerlerde noktasal kullan.
Markanız için hem açık hem koyu temada kusursuz çalışan bir arayüz mü istiyorsunuz? Erişilebilir kontrast, tutarlı renk sistemi ve göz dostu bir dark mode tasarlamada yardımcı olabilirim. Benimle iletişime geçin ve projenizi konuşalım.