Dark Mode Tasarımı Nasıl Yapılır?

Dark mode tasarımı, kontrast oranlarını optimize ederek göz yorgunluğunu azaltan ve WCAG standartlarına uygun arayüzler geliştirme sürecidir. Mobil ve web tabanlı uygulamalarda kullanıcı deneyimini doğrudan etkileyen bu dönüşüm, yalnızca estetik bir tercih değil, aynı zamanda erişilebilirlik ve enerji tasarrufu sağlayan teknik bir zorunluluktur. Bu rehberde, dijital ürün sahiplerinin, tasarımcıların ve yazılım geliştiricilerin projelerinde uygulayabileceği "Dark Mode Tasarımı Nasıl Yapılır?" sorusunun yanıtını; renk teorisinden geliştirici teslimatına (handoff), kontrast standartlarından marka kimliği uyumluluğuna kadar tüm teknik adımlarla ele alacağız.

Karanlık Mod (Dark Mode) Tasarımının Temel Prensipleri

Karanlık mod tasarlarken ilk adım, ışık modunda oluşturulmuş bir arayüzün renklerini sadece tersine çevirmekten ibaret olmadığını kavramaktır. İnsan gözünün ışığa ve karanlığa karşı biyolojik tepkisi, tasarım kararlarımızı doğrudan şekillendirir. Gündüz koşullarında (fotopik görüş) göz bebeklerimiz daralırken, karanlık ortamlarda (skotopik görüş) göz bebeklerimiz genişler. Bu durum, ekrandan gözümüze ulaşan ışık miktarını ve netlik algımızı kritik düzeyde etkiler. Başarılı bir karanlık mod uygulaması, bu biyolojik mekanizmaya uyum sağlayarak göz yorgunluğunu azaltmalı, okunabilirliği artırmalı ve güç tasarrufunu desteklemelidir.

Tasarım felsefesi olarak karanlık mod, bir yüzeyin yansıtma değerini düşürme sanatıdır. Beyaz bir arka plan ışığın %100'e yakınını gözümüze yansıtırken, koyu yüzeyler bu enerjiyi emer. Ancak bu emilim sürecinde görsel hiyerarşiyi, derinliği ve okunabilirliği kaybetmemek gerekir. Bir arayüzün tüm UI bileşenleri, karanlık ortamda hiyerarşik bir bütünlük içinde çalışmalıdır. Bunu sağlamak için saf siyah kullanımı, renk doygunluğu ve derinlik (elevation) kavramları üzerinde hassasiyetle durulmalıdır.

Saf Siyah Kullanımından Kaçınma ve Riskleri

Koyu tema tasarımlarında yapılan en yaygın hata, arka plan rengi olarak saf siyah (@@CODE0@@) ve metin rengi olarak saf beyaz (@@CODE1@@) kullanmaktır. Saf siyah arka plan üzerine yerleştirilen saf beyaz metinler, aşırı yüksek bir kontrast oranı (21:1) oluşturur. Bu yüksek kontrast, skotopik görüş durumunda olan gözde "halation" (ışık halkası/parlama) etkisine yol açar. Gözün mercek yapısındaki mikro kusurlar nedeniyle, koyu zemin üzerindeki parlak beyaz harfler dışa doğru taşıyor gibi görünür, bu da harflerin birbirine girmesine ve göz yorgunluğuna (asteni) sebebiyet verir.

Ayrıca astigmatizm gibi kırma kusurları olan kullanıcılar için bu durum çok daha yıpratıcıdır. Astigmatizmi olan bireylerde, karanlık zemindeki yüksek parlaklıklı metinler çift görme veya bulanıklaşma hissi yaratır. Bu biyolojik nedenlerden dolayı, profesyonel tasarım sistemlerinde (örneğin Google Material Design veya Apple Human Interface Guidelines) ana arka plan rengi olarak saf siyah yerine koyu gri tonları tercih edilir. Koyu gri, ışık emilimini sürdürürken, beyaz metinlerle olan kontrastı yumuşatarak göz kaslarının daha az yorulmasını sağlar.

Koyu gri kullanmanın bir diğer avantajı ise arayüz elemanlarında derinlik hissini oluşturabilmektir. Saf siyah bir zeminde gölgeler (box-shadow) görünmez hale gelir. Bu da butonlar, kartlar veya açılır menüler gibi üst katmanda yer alması gereken nesnelerin arka planla bütünleşerek kaybolmasına yol açar. Koyu gri zeminler ise hem gölgelerin görünmesine izin verir hem de üzerine eklenecek yarı saydam beyaz katmanlar sayesinde elemanların yükseklik kazanmasını kolaylaştırır.

Doygunluğu Azaltılmış (Desaturated) Renk Paleti Oluşturma

Işık modunda kullanılan canlı, parlak ve yüksek doygunluğa (saturation) sahip renkler, karanlık bir arka plan üzerine yerleştirildiğinde "titreşim" (vibration) etkisi yaratır. İnsan gözü, karanlık zemindeki yüksek doygunluklu renklerin kenarlarını odaklamakta zorlanır. Bu durum görsel konforu sıfırladığı gibi, arayüzün profesyonel olmayan bir görünüme bürünmesine neden olur. Dolayısıyla karanlık temada kullanılacak renklerin doygunluğunun %10 ila %20 oranında azaltılması (desaturation) şarttır.

Renk paletinizi karanlık moda uyarlarken HSL (Hue, Saturation, Lightness) renk uzayını kullanmak işinizi kolaylaştırır. Renk tonunu (Hue) sabit tutarak, doygunluk (Saturation) değerini düşürmeli ve açıklık (Lightness) değerini artırmalısınız. Örneğin, ışık modunda kullandığınız #007BFF (Mavi) rengini doğrudan karanlık moda taşımak yerine, bu rengin doygunluğunu azaltarak daha yumuşak, pastel bir tona dönüştürmek gerekir. Bu sayede hem markanızın renk kimliğini korumuş olursunuz hem de gözü yormayan bir deneyim sunarsınız.

Derinlik (Elevation) ve Gölgelendirme Hiyerarşisi

Arayüz tasarımında derinlik, bir nesnenin diğer nesnelerin üzerinde ne kadar yükseklikte konumlandığını gösteren görsel bir dildir. Işık modunda derinlik hissini genellikle koyu renkli gölgeler (shadows) ile veririz. Ancak karanlık bir arka planda, zaten koyu olan bir gölgenin algılanması neredeyse imkansızdır. Bu nedenle, karanlık mod tasarımlarında derinlik hiyerarşisi oluşturmak için "yarı saydam beyaz katman bindirme" (elevation overlay) yöntemi uygulanır.

Bir nesne kullanıcıya ne kadar yakınsa (yani z ekseninde ne kadar yukarıdaysa), o kadar fazla ışık almalıdır. Bu kural uyarınca, temel arka plan renginiz en koyu ton (örneğin @@CODE0@@) olmalıdır. Üst katmana çıkan kartlar, butonlar veya modal pencereler ise sırasıyla daha açık gri tonlarında tasarlanır. Material Design yönergelerinde bu durum, ana koyu gri yüzeyin üzerine belirli oranlarda yarı saydam beyaz (@@CODE1@@) katmanlar eklenerek çözülür. Örneğin:

• 0dp (Temel Yüzey): #121212 (Ekranın en alt katmanı)

• 1dp elevation: %5 beyaz opaklık eklenmiş yüzey

• 4dp elevation: %9 beyaz opaklık eklenmiş yüzey

• 8dp elevation: %12 beyaz opaklık eklenmiş yüzey

• 24dp elevation: %16 beyaz opaklık eklenmiş yüzey

Bu sayede, arayüzde gölge kullanamasanız bile kullanıcı hangi bileşenin önde, hangisinin arkada olduğunu sadece renk tonlarının açıklık seviyesine bakarak sezgisel olarak anlayabilir.

---

WCAG Standartlarına Göre Kontrast Oranlarının Optimizasyonu

Karanlık mod tasarımı sadece estetik bir tercih değil, aynı zamanda küresel dijital erişilebilirlik standartlarının (WCAG - Web Content Accessibility Guidelines) doğrudan bir parçasıdır. Geliştirdiğiniz arayüzün az gören, renk körlüğü olan veya farklı görme engellerine sahip bireyler tarafından da sorunsuz bir şekilde kullanılabilmesi gerekir. WCAG standartları, tasarımdaki metinlerin ve önemli arayüz bileşenlerinin (kenarlıklar, ikonlar vb.) arka plan ile arasındaki parlaklık farkını matematiksel bir formülle tanımlar. Bu formüle göre elde edilen değere "kontrast oranı" denir.

WCAG 2.1 yönergeleri, arayüzün erişilebilirlik seviyesini AA (Asgari Uyumluluk) ve AAA (Üst Düzey Uyumluluk) olmak üzere iki ana kategoride değerlendirir. Karanlık mod tasarlarken, bu standartların gerektirdiği kontrast oranlarını korumak, yasal uyumlulukların (örneğin Avrupa Erişilebilirlik Yasası - EAA veya ABD ADA yasaları) sağlanması ve kullanıcı deneyiminin optimize edilmesi açısından zorunludur.

Metin ve Arka Plan İçin Minimum Kontrast Değerleri

WCAG 2.1 standartlarına göre, metin öğelerinin arka planla olan kontrast oranları aşağıdaki kurallara göre optimize edilmelidir:

1. AA Seviyesi (Minimum Gereksinim):

• Küçük Metinler (18px altı veya kalın fontta 14px altı): En az 4.5:1 kontrast oranına sahip olmalıdır.

• Büyük Metinler (18px ve üzeri veya kalın fontta 14px ve üzeri): En az 3:1 kontrast oranına sahip olmalıdır.

1. AAA Seviyesi (Gelişmiş Gereksinim):

• Küçük Metinler: En az 7:1 kontrast oranına sahip olmalıdır.

• Büyük Metinler: En az 4.5:1 kontrast oranına sahip olmalıdır.

Karanlık modda bu kontrast oranlarını yakalamak bazen zorlayıcı olabilir çünkü arka plan rengi koyulaştıkça, metin rengini açmak kontrastı artırır ancak aynı zamanda yukarıda bahsettiğimiz "parlama" (halation) etkisini de tetikler. Bu nedenle, ideal kontrast oranını 4.5:1 ile 7:1 arasında tutmak, hem okunabilirliği maksimuma çıkarır hem de görsel konforu korur.

Aşağıdaki tablo, karanlık modda farklı UI bileşenleri için önerilen kontrast hedeflerini göstermektedir:

Tipografi Okunabilirliği ve Font Ağırlıkları

Karanlık arka planlar üzerindeki ışık yansıması, tipografik algıyı doğrudan değiştirir. Fiziksel bir kural olarak, koyu zemin üzerindeki açık renkli metinler, açık zemin üzerindeki koyu renkli metinlere göre her zaman daha kalın (bold) ve hacimli görünür. Bunun nedeni, açık renkli piksellerden yayılan ışığın yanındaki koyu piksellere doğru yayılmasıdır (irradiation). Bu görsel yanılsamayı dengelemek ve tipografi okunabilirliğini korumak için bazı teknik ayarlamalar yapılması gerekir.

İlk olarak, ışık modunda kullandığınız font ağırlıklarını (font-weight) karanlık modda bir kademe düşürmeyi düşünmelisiniz. Örneğin, ışık modunda @@CODE0@@ (Medium) veya @@CODE1@@ (Semibold) olarak ayarladığınız bir başlığı, karanlık modda sırasıyla @@CODE2@@ (Regular) veya @@CODE3@@ (Medium) değerine çekebilirsiniz. Bu sayede harflerin iç boşlukları (counters) tıkanmaz ve yazı karakteri bütünlüğünü korur.

İkinci önemli ayarlama ise harf boşlukları (letter-spacing / tracking) ve satır yüksekliğidir (line-height). Karanlık modda, harflerin birbirine yapışık görünmesini engellemek için harf boşluklarını hafifçe artırmak (örneğin CSS'te @@CODE0@@ veya @@CODE1@@) okunabilirliği ciddi ölçüde iyileştirir. Benzer şekilde, satır yüksekliğini de ışık moduna göre %5 ila %10 oranında artırmak, metin bloklarının daha rahat taranmasını sağlar.

---

Tasarım Sürecinde Sık Yapılan Kritik Hatalar

Karanlık mod tasarlarken, estetik kaygılar ile teknik gereksinimler arasında denge kurmak kolay değildir. Birçok marka ve tasarımcı, süreci hızlandırmak adına kestirme yollara başvurur ve bu durum kullanıcı deneyimini doğrudan sabote eden tasarım hatalarına yol açar. Bu hatalar sadece görsel bütünlüğü bozmakla kalmaz, aynı zamanda dönüşüm oranlarını düşürür, terk etme oranlarını (bounce rate) artırır ve erişilebilirlik engelleri yaratır.

Karar vericilerin ve ürün yöneticilerinin bu hataların farkında olması, tasarım ekiplerine doğru geri bildirimleri verebilmeleri ve bütçe/zaman kayıplarını önlemeleri açısından kritiktir. Tasarım sürecinde en sık yapılan iki kritik hatayı ve bunların yarattığı teknik riskleri inceleyelim.

Sadece Renkleri Tersine Çevirmek (Inversion)

Karanlık mod geliştirirken yapılan en büyük metodolojik hata, arayüzdeki tüm renkleri CSS'teki filter: invert(1) veya benzeri algoritmik araçlarla doğrudan tersine çevirmektir. Bu yaklaşım, ilk bakışta pratik ve zahmetsiz bir çözüm gibi görünse de felaketle sonuçlanan bir kullanıcı deneyimi üretir. Otomatik tersine çevirme işlemi, renklerin anlamsal (semantic) değerlerini tamamen bozar.

Örneğin, ışık modunda güven ve huzur veren bir mavi renk, tersine çevrildiğinde kirli bir turuncuya veya sarıya dönüşebilir. Aynı şekilde, hata mesajlarında kullanılan kırmızı renk, yeşile dönerek kullanıcının sistem uyarılarını tamamen yanlış anlamasına yol açabilir. Daha da kötüsü, arayüzde yer alan kullanıcı fotoğrafları, ürün görselleri ve grafikler de bu tersine çevirme işleminden etkilenerek "röntgen filmi" (negatif görsel) görünümüne bürünür. Bu durum, özellikle e-ticaret sitelerinde ürün görsellerini tamamen kullanılamaz hale getirerek doğrudan satış kayıplarına yol açar.

Karanlık mod, her bir UI bileşeninin, renk değişkeninin ve görsel varlığın tek tek ele alındığı, bilinçli ve sistematik bir renk eşleme (color mapping) süreci gerektirir.

İkonografi ve Kurumsal Kimlik Uyumsuzlukları

Bir diğer yaygın hata, ışık moduna göre tasarlanmış olan ikonları ve kurumsal kimlik bileşenlerini doğrudan karanlık arka plana yerleştirmektir. İkonlar genellikle ince çizgilere (stroked icons) ve hassas detaylara sahiptir. Işık modunda siyah veya koyu gri olan bu çizgiler, karanlık arka planda kaybolur. Tasarımcılar genellikle bu ikonları beyaza boyayarak sorunu çözmeye çalışırlar; ancak bu durum ikonun içindeki ince detayların parlayarak görünmez olmasına ya da ikonun görsel ağırlığının dengesizleşmesine neden olur.

Kurumsal logolar da bu durumdan en çok etkilenen unsurlardır. Şeffaf (transparent PNG) arka plana sahip koyu renkli bir logo, karanlık moda geçildiğinde tamamen görünmez hale gelebilir. Logoların etrafına beyaz bir çerçeve koymak ise markanın estetik kalitesini düşürür. Bu sorunu aşmak için, markanın logosu karanlık mod için özel olarak revize edilmeli (örneğin negatif versiyonu kullanılmalı) veya logo arkasına hafif, yumuşak bir degrade (gradient) ışık eklenerek arka plandan ayrışması sağlanmalıdır.

---

Teknik Entegrasyon ve Geliştirici Teslimatı (Handoff)

Mükemmel bir karanlık mod tasarımı yapmak sürecin sadece ilk yarısıdır. İkinci ve en kritik yarısı, bu tasarımın yazılım ekibine doğru bir mimariyle teslim edilmesi (handoff) ve kod tabanına entegre edilmesidir. Tasarımcılar ile yazılımcılar arasındaki iletişimsizlik, tasarımın tarayıcıda veya mobil cihazda hatalı görünmesine, performans sorunlarına ve bakım zorluklarına neden olur.

Modern dijital ürün yönetiminde, karanlık mod entegrasyonu "Design Tokens" (Tasarım Belirteçleri) adı verilen yapısal değişkenler üzerinden kurgulanır. Renkleri sabit değerler (örneğin @@CODE0@@ veya @@CODE1@@) olarak kodlamak yerine, anlamsal değişken isimleri kullanmak projenin sürdürülebilirliğini sağlar. Bu sayede tek bir değişkenin değerini değiştirmek, tüm arayüzdeki renk yönetimini güncellemeyi mümkün kılar.

CSS Tercihlerine Göre Otomatik Geçiş

Modern web tarayıcıları ve işletim sistemleri (iOS, Android, macOS, Windows), kullanıcının sistem genelinde tercih ettiği tema modunu (Açık/Karanlık) web sitelerine ve uygulamalara iletebilir. Web teknolojilerinde bu tercih, CSS medya sorgularından (CSS media queries) biri olan prefers-color-scheme kullanılarak yakalanır.

Geliştirici ekibi, kullanıcının hiçbir ek butona tıklamasına gerek kalmadan, işletim sistemi ayarlarına göre web sitesini otomatik olarak karanlık modda başlatabilir. Ancak iyi bir kullanıcı deneyimi için, sistem tercihinin yanı sıra arayüzde manuel bir "tema değiştirme anahtarı" (toggle switch) sunulmalı ve kullanıcının bu seçimi tarayıcı hafızasında (localStorage veya cookie) saklanmalıdır.

Aşağıdaki CSS kodu, tasarım belirteçlerinin (CSS Custom Properties / Variables) ve otomatik geçiş medya sorgusunun teknik olarak nasıl uygulanacağını göstermektedir:

/* Tasarım Belirteçleri - Varsayılan (Açık Tema) */
:root {
  --color-bg-primary: #FFFFFF;
  --color-bg-surface: #F8F9FA;
  --color-text-primary: #212529;
  --color-text-secondary: #6C757D;
  --color-brand: #0056B3; /* Işık modu için canlı mavi */
}

/* Tasarım Belirteçleri - Sistem Karanlık Mod Tercihi */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: #121212; /* Saf siyah olmayan koyu gri */
    --color-bg-surface: #1E1E1E; /* Yükseltilmiş yüzey */
    --color-text-primary: #E0E0E0; /* Gözü yormayan açık gri metin */
    --color-text-secondary: #A0A0A0; /* Yardımcı metin */
    --color-brand: #80B3FF; /* Doygunluğu azaltılmış marka rengi */
  }
}

/* Kullanıcının Manuel Seçimi İçin Sınıf Tabanlı Ezme (Override) */
[data-theme="dark"] {
  --color-bg-primary: #121212;
  --color-bg-surface: #1E1E1E;
  --color-text-primary: #E0E0E0;
  --color-text-secondary: #A0A0A0;
  --color-brand: #80B3FF;
}

Bu kod mimarisi sayesinde, HTML bileşenleri doğrudan CSS değişkenlerini kullanır (background-color: var(--color-bg-primary) gibi). Tema değiştiğinde tarayıcı sadece değişkenlerin değerlerini günceller; bu da sıfır performans kaybı ve mükemmel akıcılıkta bir geçiş deneyimi sağlar.

---

OLED Ekran Optimizasyonu ve Güç Tüketimi Stratejileri

Karanlık mod tasarımının estetik ve erişilebilirlik dışındaki en büyük ticari ve teknik değeri, donanım düzeyinde sağladığı enerji tasarrufudur. Özellikle mobil cihazlarda pil ömrü, kullanıcı memnuniyetini doğrudan etkileyen bir metriktir. Ancak her ekran teknolojisi karanlık modda aynı enerji verimliliğini sunmaz. Bu tasarrufun gerçekleşebilmesi için cihazın OLED (Organic Light Emitting Diode) veya AMOLED ekran teknolojisine sahip olması gerekir.

Geleneksel LCD (Liquid Crystal Display) ekranlarda, ekranın arkasında sürekli yanan tek bir arka ışık (backlight) bulunur. Ekrandaki görüntü siyah da olsa beyaz da olsa bu arka ışık aynı enerjiyi tüketmeye devam eder. OLED ekranlarda ise durum tamamen farklıdır. OLED panellerde her bir piksel (ve alt pikseller) kendi ışığını kendisi üretir. Bir pikselin siyah göstermesi gerektiğinde, o piksele giden elektrik akımı tamamen kesilir ve piksel kapatılır. Bu durum, doğrudan sıfır enerji tüketimi anlamına gelir.

Gerçek Saf Siyah (True Black) Ne Zaman Tercih Edilmeli?

Yukarıdaki fiziksel çalışma prensibinden yola çıkarak, maksimum pil tasarrufu sağlamak için tasarımdaki her yeri saf siyah (#000000) yapma eğilimi doğabilir. Ancak bu durum, "black smearing" (siyah lekelenmesi) adı verilen ciddi bir ekran performansı sorununa yol açar.

OLED piksellerinin tamamen kapanıp tekrar açılması, milisaniyeler düzeyinde de olsa fiziksel bir zaman alır. Kullanıcı saf siyah bir arka planda hızlıca yukarı-aşağı kaydırma (scrolling) yaptığında, kapalı olan pikseller açık renge geçerken gecikir. Bu gecikme, ekranda morumsu/mavi renkli gölgelerin uzaması ve görüntüde yırtılmalar olması şeklinde kendini gösterir. Bu duruma "black smearing" denir ve kullanıcı deneyimini oldukça olumsuz etkiler.

Bu nedenle, true black (saf siyah) kullanımı sadece belirli senaryolarda tercih edilmelidir:

• Video ve Medya Oynatıcılar: Sinematik deneyim sunmak ve ekran sınırlarını kaybetmek için video izleme alanlarında.

• Ekstrem Pil Tasarrufu Modları: Kullanıcının pil ömrünü maksimuma çıkarmak istediği özel arayüz durumlarında.

• Basit Saat ve Bildirim Ekranları (Always-On Display): Çok az hareketli öğenin olduğu ve ekranın büyük bölümünün statik kaldığı durumlarda.

Standart uygulama ve web arayüzlerinde ise arka plan için her zaman koyu gri (@@CODE0@@, @@CODE1@@ veya #1F1F1F) tonları kullanılmalıdır. Koyu gri pikseller tamamen kapanmadığı, sadece çok düşük voltajda çalıştığı için "black smearing" etkisi yaşanmaz ve akıcı bir kaydırma performansı elde edilir.

Donanım ve Pil Ömrü Performans Analizi

Yapılan bilimsel araştırmalar ve donanım testleri, karanlık modun OLED ekranlı cihazlardaki enerji tüketimini çarpıcı biçimde düşürdüğünü ortaya koymaktadır. Google tarafından yapılan Android geliştirici sunumlarında paylaşılan verilere göre, YouTube uygulamasında karanlık modun etkinleştirilmesi, %100 ekran parlaklığında pil tüketimini ışık moduna kıyasla %60'a varan oranda azaltmaktadır.

Benzer şekilde, Purdue Üniversitesi tarafından yapılan bağımsız bir araştırmada, OLED ekranlı akıllı telefonlarda karanlık modun kullanımı; orta parlaklık seviyelerinde (yaklaşık %30-%50 parlaklık) %3 ila %9 arasında güç tasarrufu sağlarken, yüksek parlaklık seviyelerinde (%100 parlaklık) bu tasarrufun %39 ila %47 aralığına çıktığı gözlemlenmiştir.

Bu veriler, özellikle harita uygulamaları, sosyal medya platformları ve uzun süre ekran açık kalması gereken SaaS araçları gibi yüksek kullanım süresine (Time on Site) sahip dijital ürünler için karanlık modun ne kadar hayati bir performans parametresi olduğunu göstermektedir.

---

Dark Mode Arayüzlerinde Marka Kimliğini Korumak

Karanlık moda geçiş süreci, markaların görsel kimlikleri için ciddi bir sınav niteliğindedir. Işık modunda mükemmel çalışan kurumsal renk paletleri, tipografi seçimleri ve görsel varlıklar; karanlık modun loş ve kontrast odaklı dünyasında kimlik erozyonuna uğrayabilir. Bir markanın dijital ürününde karanlık mod sunması, o markanın ruhundan ve estetik standartlarından ödün vermesi anlamına gelmemelidir.

Dijital ürün stratejistleri ve tasarım liderleri için buradaki ana hedef, kullanıcının hangi modda olursa olsun aynı markanın ekosisteminde olduğunu hissetmesini sağlamaktır. Buna "marka tutarlılığı" (brand consistency) denir. Marka tutarlılığını korurken kullanıcı deneyimini ve göz sağlığını optimize etmenin yollarını iki temel başlıkta inceleyebiliriz.

Marka Renklerinin Koyu Temaya Uyarlanması (Color Adaptation)

Markanızın birincil (primary) rengi, örneğin canlı bir kırmızı (@@CODE0@@) veya parlak bir sarı (@@CODE1@@) ise, bu rengi karanlık modda geniş alanlarda (örneğin buton arka planlarında veya büyük başlıklar üzerinde) doğrudan kullanamazsınız. Bu durum görsel dengesizliğe yol açar. Marka renklerini karanlık temaya uyarlarken "anlamsal renk eşlemesi" (semantic color mapping) uygulanmalıdır.

• Öne Çıkarma (Accent) Kullanımı: Canlı marka renkleri, büyük yüzeyler yerine sadece odaklanılması gereken küçük etkileşim alanlarında (örneğin bildirim rozetleri, seçili tab barları, aktif linkler veya küçük CTA butonları) "vurgu rengi" (accent color) olarak kullanılmalıdır.

• Yüzeylerden Ayırma: Marka renklerini arayüz elemanlarının arka planında kullanmak yerine, koyu gri yüzeylerin üzerine ince kenarlıklar (borders) veya hafif iç gölgeler (inner shadows) ekleyerek markanın renk esintisini hissettirebilirsiniz.

• Renk Skalası Genişletme: Tasarım sisteminizde her marka rengi için açık mod ve karanlık mod olmak üzere iki ayrı skala (palette) oluşturmalısınız. Karanlık mod skalasındaki renk tonlarının ışık geçirgenliği ve parlaklığı, koyu arka plan üzerinde kaybolmayacak ancak parlamayacak şekilde ince ayarlarla (bölgesel kontrast testleri yapılarak) belirlenmelidir.

Görsel ve Medya Varlıklarının (Assets) Optimizasyonu

Karanlık mod tasarımı sadece kodlanmış UI bileşenlerini değil, arayüz içindeki zengin medya varlıklarını da kapsar. Ürün fotoğrafları, illüstrasyonlar, banner tasarımları ve video küçük resimleri (thumbnails) karanlık modda patlama yaratarak görsel konforu bozabilir. Örneğin, gece karanlığında loş bir odada telefonunu kullanan bir kullanıcı, karanlık moddaki bir blog uygulamasında gezinirken karşısına çıkan saf beyaz arka planlı bir ürün fotoğrafı yüzünden geçici körlük hissi yaşayabilir.

Bu durumun önüne geçmek için medya varlıklarında şu teknik optimizasyonlar uygulanmalıdır:

1. Görsel Karartma Filtreleri (Image Dimming): CSS filtreleri yardımıyla, karanlık mod aktifken tüm fotoğrafların ve görsel varlıkların parlaklığını hafifçe düşürebilir ve kontrastını ayarlayabilirsiniz. Bu işlem, görsellerin orijinal dosyalarını bozmadan dinamik olarak yapılır:

    @media (prefers-color-scheme: dark) {
      img {
        filter: brightness(.85) contrast(1.05);
        transition: filter 0.3s ease-in-out;
      }
      /* Kullanıcı görselin üzerine geldiğinde (hover) orijinal parlaklığa dönebilir */
      img:hover {
        filter: brightness(1);
      }
    }

1. İllüstrasyon Arka Planlarının Yumuşatılması: Web sitenizde veya uygulamanızda kullandığınız vektörel illüstrasyonların (SVG) arka planlarını şeffaf hale getirmeli veya illüstrasyon içindeki parlak beyaz alanları karanlık mod paletine uygun pastel tonlarla değiştirmelisiniz.

2. Çoklu Asset Sunumu: Kritik grafikler ve şemalar için hem ışık moduna hem de karanlık moda özel olarak hazırlanmış iki farklı görsel dosyası barındırmak ve tema değişiminde doğru görseli yüklemek (HTML <picture> etiketi kullanarak) en profesyonel yaklaşımdır:

    <picture>
      <source srcset="logo-dark-mode.svg" media="(prefers-color-scheme: dark)">
      <img src="logo-light-mode.svg" alt="Kurumsal Logo">
    </picture>

---