Dark Mode Tasarımı: İlk Temayı Bozmadan İkinci Temayı Nasıl Yayına Alırsın

Çoğu dark mode tasarlanmaz, ters çevrilir. Tasarımcı arka planı neredeyse siyaha çevirir, metni neredeyse beyaza boyar ve işi bitmiş sayar. Sonuç: sert görünen, aydınlık sürümden daha kötü okunan ve markayı yanlış ışıkta duran başka bir ürün gibi gösteren bir tema.

Bu yazı işin çalışan versiyonu. Karanlık temayı bilinçli hissettiren renk matematiği, karanlıkta bozulan bileşen tuzakları ve ürün büyürken iki temayı senkron tutan token yapısı. Dribbble gradyanları yok, sadece tasarım sistemi içinde kendi yerini hak eden bir karanlık tema.

Dark mode aslında nedir

Dark mode bir renk tersyüzü değil, tam bir ikinci temadır. Kendi yüzey mantığı, kendi kontrast kuralları ve kendi tipografi ağırlık ayarları vardır. Gerçek bir dark mode, aynı bileşen setine karşı sıfırdan tasarlanır, sonra paylaşılan token'lar üzerinden aydınlık temayla uzlaştırılır.

Tersyüz kestirmesi belirli bir nedenle çöker. Aydınlık mod, derinliği yukarı yansıtan beyaz yüzeylere dayanır. Dark mode bunu tersine çeviremez, çünkü saf siyah yüzeyler derinlik yaratmak yerine onu yutar. Tüm yükseklik (elevation) sistemi baştan kurulmalıdır. Tasarım sistemleri rehberi bunun neden tek tek bileşenlerde değil token'ların içinde olması gerektiğini anlatıyor.

Dark mode 2026'da neden önemli

Üç sebep. Hiçbiri estetik değil.

OLED ekranlarda pil ömrü. OLED panelde siyah olan her piksel sıfır güç çeker. Telefonda karanlık bir arayüz, yüksek parlaklıkta ekran güç tüketimini yüzde 30 ila 60 azaltabilir. Mobil kullanıcılar için karanlık tema, görsel olmadan önce bir pil özelliğidir.

Işık hassasiyeti için erişilebilirlik. Migreni, astigmatı ya da fotofobisi olan kullanıcılar aydınlık bir arayüzü uzun süre rahatça kullanamaz. Dark mode yayınlamak bir tercih değil, bir erişilebilirlik taahhüdüdür. Web erişilebilirlik kontrol listesi temalamanın tam bir denetimde nereye oturduğunu anlatıyor.

Kullanıcı beklentisi. İşletim sistemleri tüm OS'e uygulanan bir dark mode anahtarı sunar. Sistem ayarını yok sayan ürün eski hissettirir. Kullanıcılar uygulama mağazasını ve eklenti dizinlerini dark mode desteğine göre filtreler. Eksik bir karanlık tema sadece UI boşluğu değil, bir pazarlama sorunudur.

Birinci kural: asla saf siyah kullanma

Saf siyah (#000000), yeni bir dark mode'daki en yaygın hatadır. Mümkün olan en karanlık yüzey gibi göründüğü için doğru hissettirir. Ama yanlış okunur, çünkü insan gözü mükemmel siyaha karşı derinliği yargılayamaz.

Çözüm: taban yüzey olarak ince bir marka tonu taşıyan koyu gri kullan. Çoğu ürün için #0B0B10 ile #121218 arası, bazen #1A1A1F'e kadar. Kesin değer markanın renk sıcaklığına bağlı. Sıcak bir marka hafif sıcak karanlığa gider. Soğuk bir marka hafif soğuk karanlığa. Saf nötr cansız okunur.

Aynı kural en yüksek kontrastlı metin için de geçerli. Karanlık yüzeyde saf beyaz (#FFFFFF), küçük metni yorucu hale getiren, parlak kenarlı bir bulanıklık etkisi olan halasyon yaratır. Metni #E8E8EA civarına indir ya da yüzde 85 ile 92 opaklıkta beyaz kullan. Fark gözle görünmez ama okunabilirlik için dev.

---

Dark mode'da yüzey yüksekliği

Aydınlık mod, bir kartın arka planın üstünde olduğunu göstermek için gölge kullanır. Dark mode kullanamaz, çünkü gölgeler karanlık yüzeylerde yutulur. Çözüm, açıklık üzerinden yüksekliktir.

Her yükseklik adımı yüzeyi koyulaştırmaz, açar. Taban yüzeyin üstündeki bir kart tabandan biraz daha açıktır. Kartın üstündeki bir modal daha da açıktır. Karanlık arayüzde derinlik, altlarda düşen gölgeler olarak değil, kullanıcıya doğru basamak basamak yükselen yüzeylerin gradyanı olarak okunur.

Material Design bunu beş adımlık bir yükseklik ölçeğiyle biçimlendirdi ve genel fikir her tasarım sisteminde geçerli. Çoğu ürün için çalışan bir ölçek:

Kesin sayılar markaya göre değişir ama mantık değişmez. Yükseltilmiş her yüzey altındakinden daha açıktır, her gölge ince kalır ve hiyerarşi, sayfaya çizilmiş kutular gibi değil uzayda üst üste duran yüzeyler gibi okunur.

Karanlık temalar için kontrast matematiği

Kontrast oranı sözlüğü, normal metin için 4,5'e 1, büyük metin için 3'e 1 olan WCAG tabanını anlatır. Dark mode bu kuralları gevşetmez ama nasıl karşılandıklarını değiştirir.

Aydınlık modda, beyaz zeminde #222 civarı gövde metni kabaca 16'ya 1'e ulaşır. Tasarımcılar minimumun çok üstünde devasa bir pay görmeye alışkındır. Dark mode daha sıkıdır. #0E0E12 üzerinde #E0E0E0 gövde metni yaklaşık 13'e 1 verir; hâlâ güçlü, ama hata payı daha küçük. Görünümü yumuşatmak için metni #B0B0B0'a indirmek, bir bölümü sessizce 4,5'e 1'in altına itebilir.

Disiplin şu: her dark mode renk kararı bir kontrast denetleyicisinden geçer. Tema başına bir kez değil, token eşleşmesi başına bir kez. Taban yüzeyde metin, kartta metin, modalda metin, placeholder metni, devre dışı metin, link metni. Her eşleşme ayrı bir kontroldür.

Sık görülen bir tuzak, soluk metin token'ıdır. Aydınlık modda beyaz üzerinde #666 soluk metin 5,7'ye 1 ile net okunur. #0E0E12 üzerinde #999'a çevrildiğinde oran yaklaşık 4,2'ye 1'e düşer ve WCAG AA'yı geçemez. Tersyüz kestirmesi erişilebilirlik uyumunu sessizce bozar ve çoğu ekip bir denetim bulana kadar fark etmez.

Dark mode'da renk: sadece değer değil, doygunluk

Beyaz zeminde şarkı söyleyen marka renkleri karanlıkta çoğu zaman çamurlu ya da elektrik gibi hissettirir. Sebep, karanlık yüzeylerin algılanan doygunluğu büyütmesidir. Aydınlık yüzeyde yüzde 100 doygun bir vurgu özgüvenli okunur. Aynı vurgu karanlık yüzeyde radyoaktif okunur.

Kural, karanlık tema için vurgu renklerinin doygunluğunu genelde yüzde 10 ila 20 düşürmek ve biraz açmaktır. Beyazda #3455FF olan birincil buton karanlıkta #5C78FF olabilir. Aynı ton ailesi, yeni kontrast ortamına ayarlı. Marka hâlâ marka gibi okunur. Sadece göz yormayı bırakır.

Renk paleti sözlüğü, bu ayarın içinde yaşadığı temel yapıyı anlatır. İyi bir dark mode yeni renkler icat etmez; yeni yüzey bağlamına göre ayarlanmış, aynı marka renklerinin paralel bir setini yayınlar.

---

Karanlıkta bozulan bileşen tuzakları

Çoğu bileşen dark mode için en az bir ayar ister. Birkaçı ise o olmadan tamamen bozulur. İşte olağan şüpheliler.

Kenarlıklar birincil ayırıcı olur

Aydınlık modda ince bir gölge ya da zar zor görünen bir kenarlık bileşenleri ayırır. Dark mode'da gölgeler kaybolur ve çoğu kenarlık silinir. Kenarlık, bileşen kenarlarını tanımlayan birincil araç olur ve görünür kalmak için çoğu zaman aydınlık moddaki #EEE gibi bir değerden karanlık modda #2A2A30 civarına yükseltilmesi gerekir.

Test, arayüzü bir laptopta yüzde 80 parlaklıkta görmektir. Bileşen kenarları kaybolmaya başlarsa, kenarlık token'ının karanlık temada daha parlak bir değere ihtiyacı var.

Gölgeler amacını tersine çevirir

Aydınlık modda gölgeler yüzeyleri aşağı ve geriye iter. Dark mode'da gölgeler yüzeylerin yukarı ve öne geldiğini ima etmek zorundadır. Bu genelde çok ince bir daha açık yüzey (yükseklik) ile altına, görünmeden ağırlık katan neredeyse görünmez koyu bir gölgenin birleşimiyle sağlanır.

Dark mode için çalışan bir gölge çifti:

• Dış: öğeyi zemine oturtmak için 0 4px 12px rgba(0, 0, 0, 0.5)
• İç üst vurgu: kaldırılmış bir kenarı ima etmek için inset 0 1px 0 rgba(255, 255, 255, 0.05)

Birlikte kullanıldığında bileşen oyulmuş değil yükseltilmiş okunur. Tek başına kullanıldığında ikisi de hiç okunmaz.

Devre dışı durumlar kaybolur

Aydınlık modda devre dışı bir buton genelde beyaz üzerinde doygunluğu düşürülmüş bir gridir. Aynı işlem dark mode'da butonu tamamen yüzeye karıştırır. Çözüm, devre dışı durumun opaklığını azaltmak değil artırmaktır. Soluk bir griye düşmek yerine, yükseltilmiş yüzey renginin üstünde yüzde 40 opaklık gibi bir şey. Devre dışı durum hâlâ buton gibi okunmalı, sadece etkin olmamalı.

Görseller ve illüstrasyonlar kendi işlemini ister

Beyaz arka planda çekilmiş bir ürün fotoğrafı karanlık yüzeyde bozuk görünür. Beyaz çizgiyle çizilmiş bir marka illüstrasyonu tamamen kaybolur. Görsellerin kendi dark mode geçişi gerekir: ayrı bir varlık, arka plan değişimi ya da dikkatle ayarlanmış bir filtre. Bu, dark mode'un doğru yayınlanması en pahalı parçasıdır ve çoğu ekibin kestiği parçadır.

Paralel görsel varlıkları yayınlayamayan ekipler için pragmatik çözüm: dark mode'da her görsel konteynerine, #F5F5F7 civarı yumuşak bir arka plan ve yuvarlatılmış köşeler ekle. Beyazda çekilmiş görseller artık açık bir konteynerde durur ve arayüzün geri kalanı karanlık kalır.

Girdi odak durumları daha fazla kontrast ister

Beyaz zeminde işe yarayan mavi bir odak halkası karanlık yüzeylerde etkisini kaybeder. Odak durumu sözlüğü, WCAG'in zorunlu kıldığı focus-visible göstergesini anlatır. Dark mode'da odak halkası çoğu zaman aydınlık moddaki ikizinden yüzde 10 ila 20 daha parlak ya da daha kalın olmalıdır. Erişilebilirlik gereksinimi aynı, ama onu yine karşılamak için görsel işlem ayarlanmalı.

---

İkili temalar için token yapısı

CSS override'larında yaşayan bir dark mode, zamanla kayacak bir dark mode'dur. Her yeni bileşen temalamayı farklı ele alır ve altı ay içinde üründe birbiriyle kavga eden üç temalama kalıbı olur.

Doğru yapı semantik token'lardır. Tasarım token'ı sözlüğü temel kavramı anlatır. Dark mode, token'ların opsiyonel olmadığını kanıtlayan kullanım senaryosudur.

Üç token katmanı:

Birinci katman: primitifler. Ham renk değerleri. color.neutral.900, color.brand.500. Fikir yok, bağlam yok.

İkinci katman: semantik. Role dayalı adlar. color.surface.base, color.surface.raised, color.text.primary, color.text.muted, color.border.default. Her semantik token bir primitife işaret eder.

Üçüncü katman: tema. Her tema için bir tane olmak üzere iki tam harita; her semantik token'ın hangi primitife çözüleceğine karar verir. Aydınlık tema color.surface.base'i color.neutral.50'ye eşler. Karanlık tema color.surface.base'i color.neutral.900'e eşler.

Bileşenler yalnızca semantik token tüketir. Asla doğrudan bir primitife başvurmaz ve asla bir temayı sabit kodlamaz. Tema değiştirici haritayı değiştirir, bileşenler yeniden çizilir ve hiçbir şey bozulmaz. İki tasarımcılık bir ekibin ötesine ölçeklenen tek kalıp budur.

Sistem tercihlerine saygı

Tarayıcı prefers-color-scheme değerini CSS media query'leri üzerinden sunar. Ürün buna saygı göstermek zorundadır. OS düzeyinde dark mode açık olan kullanıcının varsayılan deneyimi karanlık temadır, nokta. Uygulama içi bir anahtar bir rafinedir, yerine geçmez.

Doğru bir uygulama için üç kural:

İlk yüklemede sistem tercihine göre başla. Tasarımcı aydınlık mockup'ları sevdi diye kullanıcının OS seçimini asla aydınlık bir temayla ezme.

Kullanıcının uygulama içi seçimini kalıcı kıl. Kullanıcı uygulama içinde karanlığa geçtiyse, bu seçim yenilemelerden sağ çıkar ve sıfırlayana kadar sistem tercihini yener.

"Sistemle eşle" seçeneği sun. OS ayarının yönetmesini isteyen kullanıcıların o davranışa dönmesi için bir yol gerekir. Üç durumlu anahtar (aydınlık, karanlık, sistem) beklenen kalıptır ve varsayılan olarak yayınlanmalıdır.

Dark mode'u test etmek

Dark mode hataları saklanır. Bir bileşen tasarım dosyasında iyi görünür, aydınlık temada code review'dan geçer ve ancak kullanıcı geceleyin açtığında ortaya çıkan bir kontrast hatasıyla yayına çıkar. Test disiplini agresif olmalı.

Parlaklık testi. Ürünü karanlık bir odada, laptopta yüzde 30 parlaklıkta aç. Kaybolan, bulanıklaşan, rahatsız edici şekilde parlayan her şey hata olarak kaydedilir. Bu, fazla ince kenarlıkları, fazla parlak metni ve hâlâ fazla doygun olan vurgu renklerini yakalar.

Kontrast denetimi. Her tema değişikliği, tüm semantik eşleşmelerde tam bir kontrast kontrolü tetikler. axe, WAVE ya da Figma'nın yerleşik kontrast denetleyicisi gibi araçlar, görsel incelemenin kaçırdığı gerilemeleri yakalar.

Ekran görüntüsü farkı. Her release'te her kilit ekran için aydınlık ve karanlık mod ekran görüntüleri alınır. Görsel diff'ler, kasıtsız tema kaymasını kullanıcıdan önce ortaya çıkarır.

Gerçek cihaz testi. OLED telefonlar karanlık yüzeyleri LCD laptoplardan farklı çizer. MacBook'ta mükemmel görünen bir dark mode, bir iPhone'da çoğu zaman banding ya da sert geçişler ortaya çıkarır. Tarayıcının cihaz emülatöründe değil, gerçek telefonlarda test et.

---

Yaygın dark mode hataları

Dark mode yayın kalitesi sorunlarının çoğunu üç kalıp yaratır. Üçü de yukarıdaki token yapısıyla önlenebilir.

Yarı ters çevrilmiş UI. Ana yüzeyler karanlığa çevrilmiş, ama gömülü bileşenler (modallar, tooltip'ler, pazarlama sayfaları, eski admin ekranları) hâlâ aydınlık modda yayında. Kullanıcı karanlığa geçer ve ürünün yarısı tıklayınca beyaza geri zıplar. Çözüm, ürünün her yüzeyinin denetimi ve ekran başına tema kapsamını izleyen bir kontrol listesidir.

Bozuk marka anı. Ürün karanlığa geçerken pazarlama açılış sayfalarının aydınlık kalması ya da tersi. Marka kimliği kullanıcının yolculuğu boyunca parçalanır ve ürün iki şirket gibi hissettirir. Çözüm, pazarlama sitesinin dark mode yayınlayıp yayınlamayacağı konusunda baştan anlaşmaktır. İki seçim de geçerli, ama iki yüzey eşleşmek zorunda.

Erişilebilirlik gerilemesi. Aydınlık mod WCAG AA uyumlu çıkar, dark mode üç yerde kaçırır, bir uyumluluk denetimine kadar kimse kontrol etmez. Çözüm, semantik token katmanı artı CI'da otomatik kontrast kontrolüdür. Her PR bir kontrast kontrolü çalıştırır. Hatalar merge'ü engeller.

Dark mode'u, token'lardan teste kadar birinci sınıf bir sistem kararı olarak yayınlayan bir ekip istiyorsan, Brainy'yi tut. Dark mode nadiren zor problemdir. Zor olan, ikiliyi kayma olmadan yayınlamaktır.

SSS

Saf siyah dark mode için en iyi arka plan mı?

Hayır. Saf siyah (#000000) beyaz metinle sert bir kontrast yaratır ve gözün yüksekliği okumak için ihtiyaç duyduğu görsel derinlik ipuçlarını kaldırır. İnce bir marka tonu taşıyan koyu gri kullan, genelde #0B0B10 ile #121218 arasında. Karanlık arayüzde derinlik, kullanıcıya doğru yükselen yüzeyler olarak okunur; bu da saf siyah olmayan bir başlangıç yüzeyi gerektirir.

Dark mode'da gölge olmadan yükseklik nasıl yapılır?

Dark mode'da yükseklik gölgelerden değil açıklıktan gelir. Yükseltilmiş her yüzey altındakinden biraz daha açıktır ve kullanıcıya doğru istiflenen bir yüzey gradyanı yaratır. İnce koyu bir gölge ve çok silik bir üst vurgu etkiyi pekiştirebilir, ama birincil ipucu yüzey rengidir.

Dark mode aydınlık temanın renklerini sadece ters mi çevirmeli?

Hayır. Ters çevirmek vurgu renklerini rahatsız edici seviyelere doygunlaştırır, soluk metni WCAG kontrast eşiklerinin altına düşürür ve gölgelere dayanan yükseklik modelini bozar. Dark mode, aynı bileşen setine karşı sıfırdan tasarlanan, sonra paylaşılan semantik token'lar üzerinden uzlaştırılan ikinci bir temadır.

Dark mode'da görseller ve fotoğraflarla nasıl başa çıkarım?

Beyaz arka planda çekilmiş görseller temanın sürekliliğini bozar. Seçenekler: dark mode için paralel varlıklar yayınlamak, dark mode aktifken her görselin etrafına ince açık bir konteyner eklemek ya da filtreleri dikkatle uygulamak. İllüstrasyonlar çoğu zaman ayrı bir dark mode varyantı ister. Bu, dark mode'un en pahalı ve en sık atlanan parçasıdır.

İkili tema desteği için token'ları nasıl yapılandırırım?

Üç katman. Primitifler (ham renk değerleri), semantik token'lar (color.surface.base gibi role dayalı adlar) ve tema haritaları (her tema için bir tane, her semantik token'ı bir primitife çözer). Bileşenler yalnızca semantik token tüketir, böylece tema değiştirici haritayı değiştirir ve hiçbir şey bozulmaz. Dark mode'u küçük bir ekibin ötesine ölçekleyen kalıp budur.

Dark mode erişilebilirliği artırır mı?

Işık hassasiyeti, migreni ya da fotofobisi olan kullanıcılar için evet. Yüksek kontrastlı metne ya da belirli renk algılarına ihtiyaç duyan kullanıcılar için şart değil. Dark mode bir erişilebilirlik seçeneğidir, otomatik bir erişilebilirlik kazancı değil. Doğru uygulanmış bir karanlık tema WCAG kontrast kurallarını aydınlık temayla aynı titizlikle karşılar, kötü uygulanmış olan ise karşılayamaz.

Dark mode bir sistem kararıdır, bir anahtar değil

Tek temalı ve bozuk ikinci temalı bir ürün, tek temiz temalı bir üründen daha kötüdür. Dark mode ya aydınlık temanın tam tasarlanmış, tam test edilmiş, tam token'lanmış bir paraleli olarak yayına çıkar ya da hiç çıkmaz.

Önce token katmanını kur. Sonra kontrast matematiğini çalıştır. Karanlık temayı her yüksekliğe, her bileşene, her görsel konteynerine karşı tasarla. Düşük parlaklıkta gerçek cihazlarda test et. İki temayı birlikte yayınla ya da hiçbirini.

Dark mode'u bir tercih anahtarı gibi değil, sistem düzeyinde bir taahhüt olarak ele alan marka, web ve UI işi istiyorsan, Brainy'yi tut. İki tema, tek ürün, tek tutarlı tasarım kararı.

İlgili okumalar

• Tasarım Sistemleri Rehberi
• Erişilebilir Renk Kontrastı
• Web Erişilebilirlik Kontrol Listesi
• Tasarımcılar için Renk Teorisi
• Görsel Hiyerarşi Tasarımı