Bu yazıda, web sitenize karanlık ve aydınlık tema geçişi eklemeyi öğreneceksiniz. Bu özellik, özellikle kullanıcı deneyimini iyileştirmek isteyen geliştiriciler, web tasarımcıları ve blog sahipleri için faydalıdır. Karanlık tema düşük ışık koşullarında göz yorgunluğunu azaltırken, aydınlık tema gün ışığında daha iyi okunabilirlik sağlar. Kullanıcılara tema seçme imkanı sunmak, kişiselleştirilmiş bir deneyim sunarak sitenizin erişilebilirliğini artırır.

Şimdi adım adım HTML, CSS ve JavaScript kullanarak bu özelliği nasıl yapacağınızı göstereceğim.

Tema Geçişinin Çalışma Prensibi

Kullanıcı toggle butonuna tıkladığında, JavaScript kodu sayfanın mevcut temasını kontrol eder. Eğer sayfa şu anda karanlık modda ise, arka plan rengini ve metin rengini değiştiren ilgili CSS sınıfları kaldırılır ve yerine açık tema sınıfları eklenir. Bu değişiklik, sayfanın aydınlık moda geçmesini sağlar.

Eğer sayfa aydınlık modda ise, tam tersi işlem gerçekleşir. Açık tema sınıfları kaldırılarak, karanlık tema sınıfları eklenir. Böylece arka plan rengi koyulaşır ve metin rengi beyaza dönüşür.

Ayrıca, CSS yardımıyla toggle butonunun konumu ve rengi değiştirilerek kullanıcıya görsel bir geri bildirim sağlanır. Böylece butonun sol veya sağa kaymasıyla hangi modun aktif olduğu anlaşılır. Bu sayede kullanıcılar kolayca tercih ettikleri tema moduna geçiş yapabilirler.

HTML Dosyasının Temel Yapısı

Öncelikle index.html adında bir dosya oluşturun ve temel HTML yapısını ekleyin:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Dark and Light Theme Toggle</title>
</head>
<body class="bg-white text-black min-h-screen flex items-center justify-center">
    <div class="container mx-auto p-4 flex flex-col items-center">
        <div class="flex items-center mb-4">
            <div id="toggle" class="toggle mr-2"></div>
            <span id="toggle-text" class="text-lg font-semibold">LIGHT MODE</span>
        </div>
        <p id="sample-text" class="text-center text-lg">Neque porro quisquam est qui dolorem ipsum.</p>
        <img id="sample-image" class="rounded mt-5 border border-gray-400 p-2" src="https://via.placeholder.com/150" alt="Sample">
    </div>
    <script src="script.js"></script>
</body>
</html>

Tailwind CSS eklendi çünkü önceden tanımlanmış stiller sayesinde daha hızlı ve esnek tasarımlar oluşturabiliriz.

toggle butonu eklendi, çünkü kullanıcılar bu butona tıklayarak tema geçişi yapabilecekler.

İlgili Makaleler
Tailwind CSS v4 ile Özel Renkler (Config Dosyasını Düzenlemeden)

Kullanıcının hangi temayı kullandığını göstermek için span etiketi eklendi. Bu, anlık olarak temanın durumunu gösterir.

Örnek bir paragraf ve resim eklendi. Böylece tema değişikliğinin sadece arka plan rengini değil, metin ve görsellerin çerçevesini de nasıl etkilediğini gözlemleyebiliriz.

Toggle Butonunun CSS Stili

Şimdi style.css dosyanızı oluşturun ve aşağıdaki kodları ekleyin:

.toggle {
    width: 60px;
    height: 30px;
    background-color: #333;
    border-radius: 30px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
}
.toggle::before {
    content: "";
    width: 22px;
    height: 22px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: transform 0.3s;
}
.toggle.dark {
    background-color: #bbb;
}
.toggle.dark::before {
    transform: translateX(30px);
}

toggle butonu 60px genişliğinde ve 30px yüksekliğinde tasarlandı.

İçindeki küçük yuvarlak butonun hareket edebilmesi için ::before pseudo-elementi kullanıldı.

dark sınıfı eklendiğinde butonun rengi ve konumu değişecek.

İlgili Makaleler
Etkileşimli Alt Çizgi Animasyonu: HTML ve CSS

JavaScript ile Tema Geçişi

Şimdi script.js dosyanızı oluşturun ve aşağıdaki kodları ekleyin:

const toggle = document.getElementById('toggle');
const toggleText = document.getElementById('toggle-text');
const body = document.body;
const sampleImage = document.getElementById('sample-image');
toggle.addEventListener('click', () => {
    const isDarkMode = body.classList.contains('bg-black');
    if (isDarkMode) {
        body.classList.remove('bg-black', 'text-white');
        body.classList.add('bg-white', 'text-black');
        toggle.classList.remove('dark');
        toggleText.textContent = 'LIGHT MODE';
        sampleImage.classList.remove('border-gray-800');
        sampleImage.classList.add('border-gray-400');
    } else {
        body.classList.remove('bg-white', 'text-black');
        body.classList.add('bg-black', 'text-white');
        toggle.classList.add('dark');
        toggleText.textContent = 'DARK MODE';
        sampleImage.classList.remove('border-gray-400');
        sampleImage.classList.add('border-gray-800');
    }
});

toggle butonuna tıklandığında tema geçişi yapılır.

body elementinin sınıfları değiştirilerek arka plan rengi değiştirilir.

toggle-text değişkeni güncellenerek kullanıcıya hangi modda olduğu belirtilir.

Görselin kenar rengi koyu veya açık moda göre değişir.

Bu eğitimde HTML, CSS ve JavaScript kullanarak karanlık ve aydınlık tema geçişi nasıl yapılır öğrendik. Böylece kullanıcılarınıza daha iyi bir deneyim sunabilirsiniz.