Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için herhangi bir derleyiciye veya karmaşık bir geliştirme ortamına ihtiyacınız yoktur. Modern bir tarayıcı (Chrome, Firefox, Edge veya Safari) ve herhangi bir kod editörü (VS Code gibi) yeterlidir. İşlemlerin temelinde CSS'in güçlü bir özelliği olan "Custom Properties" yer almaktadır.

• Modern bir kod editörü (VS Code tavsiye edilir).
• Temel HTML5 ve CSS3 bilgisi.
• Tarayıcı geliştirici araçlarını (F12) kullanma becerisi.
• Proje dosyalarınız için temiz bir dizin yapısı.

CSS Değişkenleri ile Tema Temellerini Atma

Karanlık modun temelini, renkleri doğrudan elementlere atamak yerine değişkenler üzerinden tanımlamak oluşturur. Bu yöntem, temanın tek bir noktadan değiştirilmesini sağlar. Aşağıdaki örnekte, kök (root) seçicisi üzerinde varsayılan açık mod renklerini tanımlıyoruz.

:root {
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
    --accent-color: #007bff;
}

[data-theme='dark'] {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --accent-color: #bb86fc;
}

Bu kod bloğunda, :root seçicisi varsayılan değerleri tutarken, [data-theme='dark'] seçicisi karanlık mod aktif olduğunda devreye girecek renkleri barındırır. Bu yapı, temanın kolayca değiştirilmesine olanak tanır.

HTML Yapısını ve Temayı Değiştirecek Butonu Oluşturma

Karanlık modu tetiklemek için bir arayüze ihtiyaç vardır. Basit bir buton, kullanıcıya bu seçeneği sunmak için yeterlidir. HTML dosyanızın gövdesinde (body) aşağıdaki yapıyı kullanabilirsiniz.

Temayı Değiştir

    
Hoş Geldiniz
    
Bu içerik seçilen temaya göre renk değiştirecektir.

Bu HTML yapısı, kullanıcı etkileşimi için gerekli olan theme-toggle kimliğine (ID) sahip butonu ve stil alacak ana içerik alanını tanımlar.

JavaScript ile Tema Değiştirme Mantığını Kurma

HTML ve CSS tek başlarına bir "durum" yönetemezler. Kullanıcı butona tıkladığında data-theme niteliğini değiştirmek için basit bir JavaScript fonksiyonu kullanacağız. Bu fonksiyon, HTML etiketine ilgili niteliği ekleyip kaldıracaktır.

const toggleButton = document.getElementById('theme-toggle');

toggleButton.addEventListener('click', () => {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
});

Burada localStorage kullanarak kullanıcının tercihini tarayıcı kapansa bile hatırlamasını sağlıyoruz. Bu, profesyonel bir web uygulamasında olması gereken en temel kullanıcı deneyimi kuralıdır.

Sistem Tercihlerine Duyarlı Karanlık Mod (Media Queries)

Kullanıcılar işletim sistemi düzeyinde karanlık modu tercih etmiş olabilirler. Bunu CSS'te prefers-color-scheme kullanarak otomatik algılayabiliriz. Bu, web sitenizin kullanıcıya daha kişiselleştirilmiş bir başlangıç sunmasını sağlar.

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212;
        --text-color: #e0e0e0;
    }
}

Bu kod, eğer kullanıcı işletim sistemi ayarlarında karanlık modu seçmişse, siteye girer girmez karanlık modun aktif olmasını sağlar. Ancak kullanıcının kendi seçimi (butona tıklayarak yaptığı) her zaman bu varsayılan tercihin önüne geçmelidir.

Tema Yöntemleri Karşılaştırma Tablosu

Güvenlik Uyarısı: Yerel depolama (localStorage) kullanırken, kullanıcı verilerini asla kritik işlemler (şifre, kredi kartı vb.) için kullanmayın. Bu alan XSS (Cross-Site Scripting) saldırılarına karşı savunmasızdır; sadece tema tercihi gibi zararsız veriler için güvenlidir.

Sıkça Sorulan Sorular

Karanlık modun sayfayı yavaşlatma ihtimali var mı?

Hayır, CSS değişkenleri tarayıcılar tarafından çok hızlı işlenir. Performans kaybı yaşanmaz.

Kullanıcının tercihi sayfayı yenileyince siliniyor, ne yapmalıyım?

Rehberde belirttiğimiz localStorage kullanımı bu sorunu çözer. Sayfa yüklendiğinde localStorage içindeki değeri kontrol eden bir script eklemelisiniz.

Tüm renkleri tek tek değiştirmek zorunda mıyım?

Hayır, renk paletinizi değişkenlere atadığınız sürece sadece değişken değerlerini değiştirmeniz yeterlidir.

Sistem teması ile kullanıcı tercihi çakışırsa hangisi kazanır?

JavaScript ile localStorage kontrolünü, CSS medya sorgularından daha öncelikli çalışacak şekilde kurgulamanız gerekir.

Karanlık modda görselleri nasıl yönetirim?

CSS'te filter: brightness(.8) contrast(1.2); kullanarak görsellerin parlaklığını karanlık modda otomatik olarak kısabilirsiniz.

İleri Seviye İpuçları: Geçiş Efektleri ve Kullanıcı Deneyimi (UX)

Karanlık mod geçişlerini daha profesyonel hale getirmek için CSS transition özelliğini stratejik kullanmalısınız. Tema değiştiğinde renklerin aniden patlaması yerine yumuşak bir geçiş, kullanıcı gözünü yormaz. Ancak, tüm sayfaya transition: all 0.3s ease vermek performans sorunlarına yol açabilir. Bunun yerine sadece renk özelliklerine odaklanın.

/* CSS: Performans odaklı geçiş */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

[data-theme='dark'] {
  --bg-color: #121212;
  --text-color: #f0f0f0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  /* Sadece renk geçişlerini yumuşat */
  transition: background-color 0.4s ease, color 0.4s ease;
}

Ayrıca, kullanıcıların karanlık modda içerik okurken yaşadığı "göz kamaşması" sorununu engellemek için filter yerine opacity veya mix-blend-mode tekniklerini de değerlendirebilirsiniz. Özellikle büyük tipografi bloklarında, karanlık modda yazı tipini (font-weight) bir derece inceltmek, metnin daha keskin görünmesini sağlar.

Karanlık Modda Hata Ayıklama ve Test Süreçleri

Geliştirme aşamasında karanlık modun düzgün çalışıp çalışmadığını doğrulamak için tarayıcı geliştirici araçlarını (DevTools) kullanmak kritiktir. Chrome veya Firefox'ta "Rendering" sekmesi altından "Emulate CSS media feature prefers-color-scheme" seçeneğini kullanarak, kodunuzun sistem tercihlerine nasıl tepki verdiğini anlık görebilirsiniz.

Sık Karşılaşılan Hatalar ve Çözümleri

• Flash of Inaccurate Theme (FOIT): Sayfa ilk yüklendiğinde bir anlığına beyaz ekran görünüp sonra karanlık moda geçmesi. Bunu engellemek için tema tercihini localStorage yerine cookie ile sunucu tarafında okuyabilir veya HTML head kısmına küçük bir script bloğu ekleyerek render işlemini tema belirlenene kadar geciktirebilirsiniz.
• Dinamik İçerik Sorunları: JavaScript ile sayfaya sonradan eklenen (AJAX/Fetch) öğelerin tema değişkenlerini almaması. Çözüm olarak, yeni eklenen öğelere de data-theme özniteliğini miras alacak bir yapı kurmalısınız.
• SVG İkonların Görünmezliği: İkonlarınızın fill değerini currentColor olarak ayarlamadıysanız, karanlık modda ikonlar arka planla aynı renge bürünebilir.

/* İkonlar için en iyi pratik */
svg {
  fill: currentColor; /* İkonun rengini otomatik olarak metin rengiyle eşitle */
}

Test süreçlerinde sadece masaüstü değil, mobil cihazlardaki "Gece Modu" (Night Shift) ile kendi uyguladığınız karanlık modun çakışmadığından emin olun. Bazı mobil tarayıcılar, kendi karanlık modlarını sitenizin üzerine zorla uygulayabilir; bu durumu color-scheme: light dark; meta etiketi ile kontrol altına alabilirsiniz.

Sonuç

Html & Css ile özelleştirilebilir bir karanlık mod teması oluşturmak, modern web standartlarını yakalamak için atılacak en önemli adımlardan biridir. CSS değişkenlerinin gücünü JavaScript'in esnekliğiyle birleştirerek, kullanıcılarınıza daha konforlu bir deneyim sunabilirsiniz. Bir sonraki adım olarak, bu yapıyı bir CSS framework'ü (Tailwind CSS gibi) ile nasıl entegre edebileceğinizi araştırmanızı öneririm.

Kod güvenliği sorumluluk reddi: Bu rehberdeki kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanırken, özellikle kullanıcı girdilerini işlediğiniz alanlarda XSS ve diğer güvenlik açıklarına karşı gerekli sanitasyon işlemlerini yapmayı ihmal etmeyin.