Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce modern bir web tarayıcısına (Chrome, Firefox, Edge veya Safari) ve kod düzenleyiciye (VS Code önerilir) ihtiyacınız var. 2026 yılı standartlarında, tarayıcıların CSS değişkenlerini destekleme oranı %99'un üzerindedir, bu nedenle eski yöntem olan "her sınıfı ayrı ayrı değiştirme" yaklaşımını terk ediyoruz.

• HTML5: Sayfa iskeletini oluşturmak için.
• CSS3 (Modern): Değişkenler ve medya sorguları (media queries) için.
• Live Server: Yaptığınız değişiklikleri anlık görmek için VS Code eklentisi.

CSS Değişkenleri ile Renk Paleti Tanımlama

Karanlık modun temelinde, renklerin sabit değerler yerine değişkenler üzerinden yönetilmesi yatar. CSS'in :root seçicisi, tüm sayfa genelinde erişilebilir olan küresel değişkenleri tanımlamamızı sağlar. Bu yöntem, renkleri tek bir yerden yönetmenize olanak tanır.

:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --primary-color: #007bff;
}

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

Yukarıdaki kodda, :root varsayılan (aydınlık) modu temsil ederken, [data-theme='dark'] seçicisi karanlık mod aktif olduğunda devreye girecek renkleri barındırır. Bu yapıyı kullanmanın avantajı, kodun bakımının çok daha kolay olmasıdır.

HTML Yapısını Hazırlama

Karanlık modun tetiklenmesi için bir düğmeye ve içeriği gösterecek bir kapsayıcıya ihtiyacımız var. HTML tarafında semantik etiketler kullanmak, SEO ve erişilebilirlik açısından kritiktir.

    
        
Karanlık Mod Uygulaması
        Modu Değiştir
    
    
        
Bu içerik seçilen temaya göre renk değiştirecektir.
    

Burada button elemanına verdiğimiz id, daha sonra JavaScript ile etkileşime geçmek için kullanılacaktır. Semantik HTML kullanımı, ekran okuyucuların sayfayı daha iyi anlamasını sağlar.

CSS ile Stil Giydirme ve Geçiş Efektleri

Değişkenleri tanımladık, şimdi bu değişkenleri CSS özelliklerine atamamız gerekiyor. Geçiş efektleri (transition), temanın aniden değil, yumuşak bir şekilde değişmesini sağlar.

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: sans-serif;
}

button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

Burada var(--değişken-adı) yapısını kullanarak renkleri tanımladık. transition özelliği sayesinde tema değişimi kullanıcı için daha akıcı bir deneyim sunar.

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

Temayı değiştirmek için kullanıcının düğmeye tıklamasını dinlemeli ve data-theme özniteliğini değiştirmeliyiz. Bu, CSS'in otomatik olarak güncellenmesini sağlar.

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);
});

Bu JavaScript kodu, document.documentElement yani etiketine bir öznitelik ekler veya siler. Böylece CSS'teki [data-theme='dark'] seçicisi aktif hale gelir.

Sistem Ayarlarına Göre Otomatik Tema Algılama

Kullanıcı tarayıcı veya işletim sistemi düzeyinde karanlık mod kullanıyorsa, sitenizin bunu otomatik algılaması profesyonel bir yaklaşımdır. Bunun için prefers-color-scheme medya sorgusunu kullanırız.

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

Bu kod, kullanıcı sistem ayarlarında karanlık modu seçmişse, web sitenizin otomatik olarak karanlık modda açılmasını sağlar. Bu, modern web standartlarında "kullanıcı öncelikli" tasarımın bir parçasıdır.

Karanlık Mod Yöntemlerinin Karşılaştırılması

Güvenlik Uyarısı: Web projelerinizde kullanıcı tercihlerini localStorage üzerinde saklarken, XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olun. Kullanıcıdan alınan verileri doğrudan HTML içine basmayın ve her zaman sanitize edilmiş verilerle çalışın.

Sıkça Sorulan Sorular

Karanlık mod ayarını kullanıcının tarayıcısında nasıl kalıcı yaparım?

JavaScript ile localStorage.setItem('theme', 'dark') kullanarak kullanıcının tercihini tarayıcı belleğine kaydedebilir ve sayfa yüklendiğinde localStorage.getItem('theme') ile bu değeri okuyup uygulayabilirsiniz.

Neden CSS değişkenlerini tercih etmeliyiz?

CSS değişkenleri, kodun merkezileştirilmesini sağlar. Renk paletini değiştirmek istediğinizde yüzlerce satır CSS kodu yerine sadece :root bloğundaki birkaç satırı değiştirmeniz yeterlidir.

Karanlık modda resimlerin parlaklığını kısmak gerekir mi?

Evet, karanlık modda parlak beyaz resimler göz yorabilir. CSS'te filter: brightness(.8) contrast(1.2); kullanarak resimlerin karanlık modla uyumlu hale gelmesini sağlayabilirsiniz.

Mobil cihazlarda bu yöntem çalışır mı?

Evet, CSS değişkenleri ve medya sorguları tüm modern mobil tarayıcılarda tam desteklenmektedir.

Karanlık modun SEO'ya bir etkisi var mı?

Doğrudan bir SEO sıralama faktörü değildir, ancak kullanıcı deneyimini (UX) artırdığı için sayfada kalma süresini ve etkileşimi olumlu etkileyebilir, bu da dolaylı olarak SEO'ya katkı sağlar.

Gelişmiş Performans Optimizasyonu ve FOUC (Flash of Unstyled Content) Engelleme

Karanlık mod uygularken karşılaşılan en büyük teknik sorunlardan biri, sayfa yüklenirken kısa süreliğine beyaz ekranın (veya varsayılan temanın) görünmesi ve ardından JavaScript'in devreye girmesiyle karanlık moda geçilmesidir. Bu duruma "Flash of Unstyled Content" (FOUC) denir. Bunu engellemek için tema tercihini JavaScript yerine HTML'in head kısmında, tarayıcı render edilmeden hemen önce kontrol etmeliyiz.

Aşağıdaki kod bloğu, sayfa yüklenmeden önce localStorage verisini kontrol ederek doğru temanın uygulanmasını sağlar:

  (function() {
    const savedTheme = localStorage.getItem('theme');
    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    
    if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  })();

Bu küçük betiği etiketinin en üstüne yerleştirerek, tarayıcının sayfayı oluşturmadan önce doğru sınıfı (class) atamasını sağlayabilir ve görsel sıçramaların önüne geçebilirsiniz.

Karanlık Mod İçin Erişilebilirlik (Accessibility) İpuçları

Karanlık mod sadece siyah bir arka plan kullanmak değildir. Renk kontrast oranlarının WCAG (Web Content Accessibility Guidelines) standartlarına uygun olması gerekir. Saf siyah (#000000) yerine koyu gri tonları (#121212 veya #1e1e1e) kullanmak, göz yorgunluğunu azaltır ve metinlerin okunabilirliğini artırır.

Kontrast Kontrolü İçin İpuçları:

• Metin Rengi: Koyu arka planda saf beyaz (#FFFFFF) yerine hafif gri tonları (#E0E0E0) kullanın.
• Vurgu Renkleri: Parlak neon renkleri, koyu arka planda çok fazla "titreme" etkisi yaratabilir; bu renklerin doygunluğunu (saturation) %10-20 oranında düşürün.
• Gölge Kullanımı: Karanlık modda derinlik algısı oluşturmak için gölgeler yerine, katmanların arka plan rengini kademeli olarak açarak (elevation) hiyerarşi oluşturun.

İpucu: Chrome DevTools'ta bulunan "Rendering" sekmesini kullanarak, web sitenizin karanlık modda nasıl göründüğünü CSS kodlarını değiştirmeden simüle edebilirsiniz. "Emulate CSS media feature prefers-color-scheme" seçeneğini kullanarak testlerinizi hızlandırın.

Dinamik Renk Geçişleri İçin CSS İpucu

Renk geçişlerinde (transition) ani değişimleri engellemek için CSS değişkenlerinizi global olarak tanımlarken transition özelliğini renk özelliklerine atayın:

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --transition-speed: 0.3s;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

.dark {
  --bg-color: #121212;
  --text-color: #e0e0e0;
}

Bu yapı sayesinde, kullanıcı tema değiştirdiğinde sayfadaki tüm öğeler yumuşak bir geçişle yeni renk paletine uyum sağlar. Bu yaklaşım, kullanıcı deneyimini profesyonel bir seviyeye taşıyan en kritik detaylardan biridir.

Sonuç

Html & Css ile karanlık mod arayüzü oluşturmak, modern web geliştirme süreçlerinin temel taşlarından biridir. CSS değişkenleri ve medya sorgularını birleştirerek hem sistem tercihlerine uyumlu hem de kullanıcı tarafından kontrol edilebilir esnek bir yapı kurduk. Bir sonraki adım olarak, bu sisteme bir "Gece/Gündüz" geçiş animasyonu ekleyebilir veya kullanıcı tercihini veritabanında saklayarak farklı cihazlarda da aynı deneyimi sunabilirsiniz. Yazılım geliştirme süreçlerinde her zaman temiz, semantik ve erişilebilir kod yazmayı hedefleyerek kullanıcılarınıza en kaliteli arayüzleri sunmaya devam edin.