Ekranda gördüğünüz o karmaşık, yüzlerce satırlık CSS dosyalarını hatırlıyor musunuz? Hani şu Dark Mode yapmak için body.dark .card, body.dark .header diye her elementi tek tek yazdığımız günler... Üzgünüm ama eğer hala bu yöntemi kullanıyorsanız, kod hamallığı yapıyorsunuz demektir.

Web teknolojileri gelişti ve artık tarayıcılar bizim yerimize bu yükü taşıyabiliyor. Eskiden mecbur olduğumuz o uzun yöntemleri bugün bir kenara bırakıyoruz. Bu rehberde, CSS'in yeni gözbebeği light-dark() fonksiyonunu ve JavaScript'i sadece bir tercih yöneticisi olarak kullanarak, projenize nasıl tek satır kodla akıllı bir karanlık mod (Dark Mode) ekleyebileceğinizi anlatacağım.

Üstelik bunu yaparken şık, animasyonlu bir geçiş butonu kullanacağız ve kullanıcının tercihini tarayıcı hafızasına (LocalStorage) kaydedeceğiz.

Hazırsanız, kodlarınızı diyete sokalım.

İlgili Makaleler
CMD Matrix Kodu: Not Defteri ile Matrix Yağmuru Efekti Yapımı

Eski Yöntem Neden Tarih Oldu?

Eskiden mantık şuydu: Bir body etiketimiz vardı, JavaScript ile buna bir .dark sınıfı eklerdik. CSS dosyamızda ise her component için iki ayrı renk tanımı yapardık.

Bu yöntem projeyi büyüttükçe yönetilemez hale geliyordu. 50 farklı renk değişkeniniz varsa, dark mode için ekstra 50 satır daha kod yazmanız gerekiyordu. Şimdi ise color-scheme özelliği sayesinde tarayıcıya Ben her iki moda da hazırım mesajını veriyoruz ve gerisini CSS değişkenlerine bırakıyoruz.

Adım 1: HTML İskeleti ve Toggle Butonu

Tasarımımızı minimalist tutacağız ama kullanıcı deneyiminin (UX) en önemli parçası olan geçiş butonunu (Toggle) olduğu gibi koruyoruz. Bu buton, kullanıcının sistem ayarlarından bağımsız olarak manuel seçim yapabilmesini sağlıyor.

Aşağıdaki HTML yapısını projenizin uygun bir yerine (genellikle Header kısmına) yerleştirin:

İlgili Makaleler
HTML ve CSS ile Tam Ekran Video Arka Plan Yapımı (Adım Adım Rehber) 

<div class="theme-switch-wrapper">
    <label class="theme-switch" for="darkModeToggle">
        <input type="checkbox" id="darkModeToggle">
        <div class="slider round">
            <i class="fa-solid fa-sun sun-icon"></i>
            <i class="fa-solid fa-moon moon-icon"></i>
        </div>
    </label>
    <span class="toggle-label">Theme</span>
</div>

Bu yapıda basit bir checkbox mantığı kullanıyoruz. Checkbox işaretliyse Gece, değilse Gündüz modunu aktif edeceğiz. İkonlar için FontAwesome kütüphanesini projeye dahil etmeyi unutmayın.

Adım 2: CSS Sihri (light-dark Fonksiyonu)

İşte işin en can alıcı noktası burası. Artık medya sorguları (media queries) veya uzun sınıf tanımları yok. Kök dizine (:root) gidiyoruz ve tarayıcıya pasaportumuzu gösteriyoruz. Burada color-scheme: light dark; satırı çok kritik. Bunu yazmazsanız, aşağıdaki light-dark() fonksiyonu çalışmaz.

:root {
    /* Tarayıcıya her iki modu da desteklediğimizi bildiriyoruz */
    color-scheme: light dark;
    /* SÖZDİZİMİ: light-dark(GÜNDÜZ_RENGİ, GECE_RENGİ);
       Tek satırda iki renk tanımı!
    */
    /* Ana Arkaplanlar */
    --bg-main: light-dark(#f0f4f8, #0b0d17);
    --bg-card: light-dark(#ffffff, #15192b);
    /* Metin Renkleri */
    --text-primary: light-dark(#2d3748, #e2e8f0);
    --text-secondary: light-dark(#718096, #a0aec0);
    /* Vurgu Renkleri (Gündüz Mavi, Gece Turuncu) */
    --accent-color: light-dark(#3182ce, #f6ad55);
    /* Toggle Butonu Renkleri */
    --toggle-bg: light-dark(#cbd5e0, #2d3748);
    --toggle-active: var(--accent-color);
}
body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    transition: background-color 0.4s ease, color 0.4s ease;
}

Gördüğünüz gibi, --bg-main değişkeni için tarayıcıya şunu dedik: Eğer mod aydınlıksa #f0f4f8 kullan, karanlıksa #0b0d17 kullan. CSS'in bu yeni yeteneği, CSS birimleri ve modern özellikler konusunda ne kadar ilerlediğimizin en net kanıtı.

Toggle Butonu İçin CSS

Butonun şık görünmesi ve animasyonlu geçiş yapması için gerekli stiller ise şöyle:

İlgili Makaleler
Hyper-V Windows 11 Kurulumu: TPM ve Boot Hatası Çözümü 

.theme-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.theme-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}
.theme-switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--toggle-bg);
    transition: 0.4s;
    border-radius: 30px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.slider:before {
    position: absolute;
    content: "";
    height: 22px; width: 22px;
    left: 4px; bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}
input:checked + .slider { background-color: var(--toggle-active); }
input:checked + .slider:before { transform: translateX(30px); }
/* İkon Animasyonları */
.sun-icon, .moon-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    transition: opacity 0.3s ease;
}
.sun-icon { left: 8px; color: #fbbf24; opacity: 1; }
.moon-icon { right: 8px; color: #f3f4f6; opacity: 0; }
input:checked ~ .slider .sun-icon { opacity: 0; }
input:checked ~ .slider .moon-icon { opacity: 1; }

Adım 3: JavaScript ve LocalStorage Yönetimi

CSS tarafı hazır. Sistem ayarlarını değiştirdiğinizde siteniz otomatik olarak renk değiştirecektir. Ancak kullanıcının Ben gündüz vakti gece modu istiyorum deme hakkı olmalı.

Burada JavaScript ile CSS sınıfı ekleyip çıkarmıyoruz. Doğrudan tarayıcının algısını (color-scheme) manipüle ediyoruz ve tercihi localStorage içine kaydediyoruz. Böylece kullanıcı sayfayı yenilese bile tercihi kaybolmuyor.

const toggle = document.getElementById('darkModeToggle');
const root = document.documentElement;
// 1. Sayfa yüklendiğinde hafızayı kontrol et
const savedTheme = localStorage.getItem('theme-preference');
if (savedTheme) {
    // Hafızada bir tercih varsa onu uygula
    root.style.colorScheme = savedTheme;
    // Eğer kayıtlı ayar 'dark' ise butonu da 'tikli' hale getir
    if (savedTheme === 'dark') {
        toggle.checked = true;
    }
}
// 2. Butona basıldığında değişikliği yap ve kaydet
toggle.addEventListener('change', function () {
    if (this.checked) {
        // Kullanıcı Karanlık Modu Seçti
        root.style.colorScheme = 'dark';
        localStorage.setItem('theme-preference', 'dark');
    } else {
        // Kullanıcı Aydınlık Modu Seçti
        root.style.colorScheme = 'light';
        localStorage.setItem('theme-preference', 'light');
    }
});

Bu yöntem, performans açısından da oldukça verimli. DOM üzerinde ağır manipülasyonlar yapmadan, sadece kök stil özelliğini değiştirerek tüm sitenin temasını yönetiyorsunuz. Bu sayede yönetim paneli arayüzünüz hem sistem ayarlarına saygı duyuyor hem de kullanıcı manuel olarak kontrol edebiliyor. Üstelik CSS dosyamız tertemiz kaldı, kod tekrarı yapmadık.