Web Sitelerine 5 Dakikada 'Dark Mode' (Gece Modu) Nasıl Eklenir? 🌙

Herkese merhaba! Web dünyasında son yılların en büyük trendlerinden biri şüphesiz Dark Mode (Gece Modu). Özellikle gece geç saatlerde, arkada Foo Fighters çalarken kod yazan veya makale okuyan biriyseniz, bembeyaz bir ekranın gözleri nasıl yorduğunu çok iyi bilirsiniz.

Bugün sizlerle birlikte, herhangi bir web sitesine sadece birkaç satır HTML, CSS ve JavaScript kodu kullanarak nasıl jilet gibi bir karanlık mod ekleyebileceğinizi adım adım inceleyeceğiz. Üstelik kullanıcının seçimini hatırlaması için localStorage özelliğini de kullanacağız!

1. Adım: Geçiş Butonunu (Toggle) Oluşturmak

İlk olarak sitemize kullanıcının tıklayabileceği bir buton eklememiz gerekiyor. Bu butonu genellikle sitenin üst menüsüne (header) yerleştiririz.

    Gece Modunu Aç

2. Adım: CSS ile Renkleri Ayarlamak

Şimdi işin makyaj kısmına geliyoruz. CSS tarafında, body etiketine dark-theme adında bir class eklendiğinde renklerin nasıl değişeceğini tanımlıyoruz.

/* Varsayılan (Gündüz) Teması */
body {
   background-color: #f8fafc;
   color: #334155;
   transition: background-color 0.3s ease, color 0.3s ease;
}
/* Karanlık Mod (Gece) Teması */
body.dark-theme {
   background-color: #0f172a;
   color: #f8fafc;
}
/* Karanlık Modda Buton Görünümü */
body.dark-theme .btn-theme {
   background-color: #334155;
   color: #fcd34d;
}

3. Adım: JavaScript ile Sihri Başlatmak

Son olarak, butona tıklandığında CSS sınıfını değiştirecek ve bu seçimi tarayıcının hafızasına (localStorage) kaydedecek olan JavaScript kodumuzu yazıyoruz.

document.addEventListener('DOMContentLoaded', () => {
   const themeBtn = document.getElementById('themeToggle');
   const body = document.body;
   // Önceki ziyaretten kalan temayı kontrol et
   const savedTheme = localStorage.getItem('siteTheme');
   if (savedTheme === 'dark') {
       body.classList.add('dark-theme');
   }
   // Butona tıklama olayı
   themeBtn.addEventListener('click', () => {
       body.classList.toggle('dark-theme');
       
       // Seçimi hafızaya kaydet
       if (body.classList.contains('dark-theme')) {
           localStorage.setItem('siteTheme', 'dark');
       } else {
           localStorage.setItem('siteTheme', 'light');
       }
   });
});

İşte bu kadar basit! Sadece 5 dakikanızı ayırarak sitenizi ziyaretçileriniz için çok daha modern ve göz yormayan bir hale getirebilirsiniz. Kendi projelerinize entegre ederken renkleri temanıza göre özelleştirmeyi unutmayın.

Bir sonraki kodlama macerasında görüşmek üzere, hatasız kodlamalar! 🚀