Modern Web Geliştirmede Karanlık Mod Tasarımı: Üçlü Seçim Karmaşasına Son Veren İki Durumlu Yaklaşım

Web Geliştirmede Karanlık Mod İkilemi: İki Durum Neden Yeterlidir?

Kullanıcı arayüzü (UI) ve kullanıcı deneyimi (UX) dünyasında son yılların en popüler trendlerinden biri şüphesiz karanlık mod (Dark Mode) entegrasyonudur. Web geliştiricileri, işletim sistemi düzeyindeki renk tercihlerini algılayan @media (prefers-color-scheme) sorgusunun tarayıcılar tarafından standart hale getirilmesiyle birlikte sitelerine tema değiştiriciler eklemeye başladılar. Ancak bu süreçte pek çok modern web sitesi, arayüzlerine gereksiz bir karmaşa taşıdı: Açık (Light), Koyu (Dark) ve Sistem (System) seçeneklerinden oluşan üç durumlu (tri-state) butonlar.

CSS ve web standartları uzmanı Lea Verou'nun başlattığı ve sektörde geniş yankı uyandıran tartışma, tam da bu noktaya parmak basıyor: Sabit (persistent) navigasyon alanlarında kullanıcının karşısına üç seçenek çıkarmak hem bilişsel yükü (cognitive load) artırıyor hem de kullanıcı arayüzünü hantallaştırıyor. Doğru kurgulanmış iki durumlu bir anahtar (two-state toggle), aslında sistem durumunu da kapsayarak tüm ihtiyaçları karşılayabilir.

"Bir kontrol mekanizması kullanıcının ana hedefiyle doğrudan ilgili değilse, arayüzde kapladığı zihinsel alanı en aza indirmelisiniz. İki durumlu bir yapı, sistem ayarını varsayılan kabul edip sadece geçersiz kılma (override) ihtiyacında devreye girdiğinde kusursuz çalışır."

Bu rehberde, modern web projelerinde iki durumlu tema anahtarlayıcılarının arkasındaki mantığı, performans ve SEO etkilerini, ayrıca sıfır FOUC (Flash of Unstyled Content) ile en temiz JavaScript/CSS mimarisini derinlemesine inceleyeceğiz.

Üç Durumlu (Tri-State) ve İki Durumlu (Two-State) Yaklaşımların Karşılaştırması

Geliştiriciler genellikle kullanıcılara maksimum özgürlük tanımak adına Sistem seçeneğini ayrı bir buton olarak sunarlar. Oysa kullanıcı deneyimi araştırmaları, arayüzdeki her ekstra seçeneğin karar verme süresini katlayarak artırdığını (Hick Yasası) göstermektedir.

Aşağıdaki tabloda bu iki yaklaşımın teknik ve kullanıcı deneyimi boyutlarını karşılaştırdık:

İki Durumlu Akıllı Mantık Nasıl Çalışır?

İki durumlu modelin temel felsefesi oldukça sadedir:

1. İlk Ziyaret (No Override): Kullanıcının cihazı karanlık moddaysa site karanlık, aydınlık moddaysa site aydınlık açılır. Sistem tercihine tamamen saygı duyulur. Arayüzde sadece "diğer duruma geçiş" seçeneği gösterilir.
2. Kullanıcı Müdahalesi (User Override): Kullanıcı açık moddayken butona basarsa, bu tercih açıkça bir override (geçersiz kılma) olarak algılanır ve localStorage içine kaydedilir.
3. Geri Dönüş (Revert): Kullanıcı aynı butona tekrar basarak varsayılana dönmek istediğinde, sistem override kaydını silebilir veya ters duruma sabitleyebilir. Lea Verou'nun vurguladığı gibi: Kullanıcının işletim sistemi açıkken siteyi zorla açığa sabitlemek istemesi nadir bir senaryodur; işletim sistemi koyu moda geçtiğinde zaten kullanıcı tek bir tıklamayla siteyi tekrar istediği duruma getirebilir.

Sıfır FOUC (Flash of Unstyled Content) ile Modern Uygulama

Tema yönetiminde en kritik teknik problem FOUC, yani sayfa yüklenirken temanın anlık olarak beyazdan siyaha (veya tersi) parlamasıdır. Bu durum Cumulative Layout Shift (CLS) ve Largest Contentful Paint (LCP) metriklerini doğrudan olumsuz etkileyerek teknik SEO puanınıza zarar verir.

Bunu önlemek için tema belirleme betiği CSS render edilmeden önce <head> içerisinde, bloklayıcı ve ultra-hafif bir JavaScript parçacığı olarak çalıştırılmalıdır.

1. HTML & Head İçi Erken Betik (Inline Script)

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Tema Yönetimi</title>
  
  <!-- FOUC Önleyici Kritik Betik -->
  <script>
    (function() {
      const savedTheme = localStorage.getItem('theme-preference');
      if (savedTheme) {
        document.documentElement.setAttribute('data-theme', savedTheme);
      } else {
        // Sistem tercihini kontrol et ama DOM'a sadece gerekirse yaz
        const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        document.documentElement.setAttribute('data-theme', systemDark ? 'dark' : 'light');
      }
    })();
  </script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <button id="theme-toggle" aria-label="Temayı Değiştir" type="button">
      <span class="theme-icon"></span>
    </button>
  </header>
</body>
</html>

2. CSS Değişkenleri ve Renk Şeması Mimarisi

/* Modern CSS Renk Tanımlamaları */
:root {
  color-scheme: light dark;
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
}

/* Sistem Koyu Modu (Override Yokken) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-color: #0f172a;
    --text-color: #f8fafc;
  }
}

/* Açık Mod Override */
[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
}

/* Koyu Mod Override */
[data-theme="dark"] {
  --bg-color: #0f172a;
  --text-color: #f8fafc;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.2s ease, color 0.2s ease;
}

3. İki Durumlu Toggle JavaScript Kodu

// theme-toggle.ts
const initThemeToggle = (): void => {
  const button = document.getElementById('theme-toggle') as HTMLButtonElement | null;
  if (!button) return;

  const getCurrentTheme = (): 'dark' | 'light' => {
    const explicitTheme = document.documentElement.getAttribute('data-theme');
    if (explicitTheme === 'dark' || explicitTheme === 'light') {
      return explicitTheme;
    }
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  };

  button.addEventListener('click', () => {
    const current = getCurrentTheme();
    const nextTheme = current === 'dark' ? 'light' : 'dark';

    // Yeni temayı uygula ve sakla
    document.documentElement.setAttribute('data-theme', nextTheme);
    localStorage.setItem('theme-preference', nextTheme);
  });

  // İşletim sistemi tercihi değiştiğinde yerel ayar yoksa dinamik güncelle
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
    if (!localStorage.getItem('theme-preference')) {
      document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
    }
  });
};

document.addEventListener('DOMContentLoaded', initThemeToggle);

Teknik SEO ve Core Web Vitals Açısından Neden Önemli?

Karanlık mod uygulamalarının SEO ile doğrudan bir ilişkisi yokmuş gibi görünse de Google'ın Page Experience (Sayfa Deneyimi) sinyalleri ve Core Web Vitals metrikleri açısından dolaylı etkileri büyüktür:

1. Kümülatif Düzen Kayması (CLS): Ağır JavaScript framework'leri tarafından sonradan enjekte edilen tema sınıfları, CSS yeniden hesaplamalarına (re-calculation) ve tipografik kaymalara neden olur. Basit iki durumlu ve inline-head mantığı CLS skorunu 0'a yakın tutar.
2. İlk Giriş Gecikmesi (FID) / INP (Interaction to Next Paint): Üçlü dropdown menüler, karmaşık state makineleri ve harici kütüphaneler main thread'i kilitler. İki durumlu yalın bir buton sıfır gecikmeyle (sub-10ms) çalışarak INP metriğini optimize eder.
3. Bilişsel Sürtünmenin Azalması ve Hemen Çıkma Oranı (Bounce Rate): Kullanıcı sitenize içerik tüketmek veya alışveriş yapmak için gelir. Karmaşık tema ayarlarıyla dikkat dağıtmak yerine pürüzsüz bir deneyim sunmak hemen çıkma oranlarını düşürür.

Üç Durumlu Yapı Ne Zaman Kullanılmalıdır?

Lea Verou'nun da haklı olarak belirttiği gibi, üç durumlu seçimin tamamen çöpe atılması gerekmez. Bu desenin meşru olduğu iki temel senaryo vardır:

• Ayrı Profil ve Ayarlar Panelleri: Kullanıcının site genelindeki tüm tercihlerini yönettiği özel bir /settings sayfasında Açık / Koyu / Sistem seçeneği sunmak anlamlıdır çünkü kullanıcı o sayfaya doğrudan konfigürasyon amacıyla gelmiştir.
• İkiden Fazla Tema Desteği: Siteniz yüksek kontrast, sepya veya marka renklerine özel dördüncü bir tema barındırıyorsa, basit toggle yerine çoklu seçim paneli zorunlu hale gelir.

Kaynak: CSS-Tricks - https://css-tricks.com/dark-mode-toggles-two-states-are-enough/