Dark Mode (Karanlık Mod) için CSS ile Tema Değişimi

Yorumlar

Karanlık mod, modern web ve mobil uygulamalarda giderek daha popüler hale gelen bir özellik. Kullanıcıların göz yorgunluğunu azaltması ve pil tasarrufu sağlaması nedeniyle, birçok site ve uygulama bu özelliği destekliyor. Peki, web sitenizde karanlık mod desteğini nasıl ekleyebilirsiniz? Bu yazıda, CSS ve JavaScript kullanarak tema değişimini nasıl kolayca yapabileceğinizi anlatacağız.

1. CSS ile Basit Karanlık Mod

Karanlık modu uygulamanın en basit yolu prefers-color-scheme medya sorgusunu kullanmaktır. Bu sayede kullanıcının işletim sistemindeki tema tercihini otomatik olarak algılayabilirsiniz.

CSS

/* Açık tema (varsayılan) */
body {
  background-color: white;
  color: black;
}

/* Karanlık tema */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Bu yöntem tamamen otomatik çalışır ve tarayıcının kullanıcının sistem ayarlarına göre açık veya koyu temayı seçmesini sağlar. Ancak kullanıcı manuel olarak değiştirmek isterse, ekstra bir JavaScript desteği gereklidir.

2. JavaScript ile Tema Değiştirme

Bazı kullanıcılar tercih ettiği temayı değiştirmek isteyebilir. Bunun için bir buton ile ışık ve karanlık mod arasında geçiş yapabiliriz.

HTML Kodu

HTML

<button id='temaButonu'>Karanlık Mod</button>

CSS Kodu

CSS

body.karanlik {
  background-color: black;
  color: white;
}

JavaScript Kodu

document.addEventListener('DOMContentLoaded', function() {
    let temaButonu = document.getElementById('temaButonu');
    temaButonu.addEventListener('click', function() {
        document.body.classList.toggle('karanlik');
        temaButonu.textContent = document.body.classList.contains('karanlik') ? '☀️ Açık Mod' : '🌙 Karanlık Mod';
    });
});

Bu kod:

Kullanıcı butona tıkladığında body öğesine karanlik sınıfını ekler/kaldırır.
Butonun içeriğini (ikon ve yazı) dinamik olarak değiştirir.
Basit ve hafif bir tema geçişi sağlar.

3. LocalStorage ile Kullanıcı Tercihini Kaydetme

Kullanıcı sayfayı yenilediğinde veya siteyi tekrar ziyaret ettiğinde, tercih ettiği temanın korunması önemlidir. Bunun için LocalStorage kullanabiliriz.

Güncellenmiş JavaScript Kodu

document.addEventListener('DOMContentLoaded', function() {
    let temaButonu = document.getElementById('temaButonu');
    let mevcutTema = localStorage.getItem('tema');
    
    if (mevcutTema === 'karanlik') {
        document.body.classList.add('karanlik');
        temaButonu.textContent = '☀️ Açık Mod';
    }
    
    temaButonu.addEventListener('click', function() {
        document.body.classList.toggle('karanlik');
        let yeniTema = document.body.classList.contains('karanlik') ? 'karanlik' : 'acik';
        localStorage.setItem('tema', yeniTema);
        temaButonu.textContent = yeniTema === 'karanlik' ? '☀️ Açık Mod' : '🌙 Karanlık Mod';
    });
});

Bu eklemeyle: Tema tercihi kaydedilir, sayfa yenilendiğinde kullanıcı ayarı korunur. Daha iyi bir kullanıcı deneyimi sağlanır.

Web sitenize karanlık mod desteği eklemek, hem estetik hem de işlevsellik açısından önemli bir geliştirmedir. CSS’in prefers-color-scheme medya sorgusu ile otomatik geçiş yapabilir, JavaScript ile kullanıcıya manuel kontrol sağlayabilir ve LocalStorage kullanarak ayarları kalıcı hale getirebilirsiniz. Şimdi kendi web sitenize karanlık modu ekleyerek kullanıcı deneyimini geliştirin!

Paylaş: Facebook X LinkedIn WhatsApp

Önceki Yazı

Flexbox ve CSS Grid ile Modern Layout Tasarımı

Sonraki Yazı

Linux’ta Crontab ile Zamanlanmış Görevler Nasıl Kullanılır?