Merhaba! Web sayfanızda karanlık tema butonu eklemek için HTML, CSS ve JavaScript kullanabilirsiniz. Aşağıda basit bir örnek bulunmaktadır:
1. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Web Sayfanız</title>
</head>
<body>
<div class="container">
<h1>Web Sayfanızın Başlığı</h1>
<!-- Diğer içerikler buraya eklenebilir -->
<!-- Tema değiştirme butonu -->
<button id="darkModeToggle">Karanlık Tema</button>
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS (styles.css)
body {
background-color: white; /* Varsayılan arka plan rengi */
color: black; /* Varsayılan metin rengi */
transition: background-color 0.3s, color 0.3s; /* Animasyon efekti için geçiş süresi */
}
.dark-mode {
background-color: black !important; /* !important kullanılması mevcut stilleri geçersiz kılmak içindir */
color: white !important;
}
Bu kod örneğinde, body etiketi için varsayılan arka plan rengi beyaz, metin rengi siyah olarak ayarlanmıştır. JavaScript ile temayı değiştirmek için bir buton eklenmiştir. Butona tıklandığında, dark-mode sınıfı body elementine eklenir veya kaldırılır, bu da CSS'deki karanlık tema stilini uygular veya kaldırır. CSS'de yapılan bu değişiklikler geçiş efekti ile yumuşatılır.
Bu örneği kendi web sayfanıza uyarlayabilir ve ihtiyaçlarınıza göre özelleştirebilirsiniz.
3. JavaScript (script.js)
Tarayıcının karanlık temayı hatırlamasını sağlamak için birkaç yol bulunmaktadır. Genellikle tarayıcıda yerel depolama (localStorage veya sessionStorage) kullanmak bu iş için uygundur. Aşağıda, temayı hatırlamak için localStorage kullanarak bir örnek bulunmaktadır:
document.addEventListener('DOMContentLoaded', function () {
const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;
const darkModeClass = 'dark-mode';
const storageKey = 'darkModeEnabled';
// Sayfa yüklendiğinde kontrol et ve temayı uygula
if (localStorage.getItem(storageKey) === 'true') {
enableDarkMode();
}
// Tema değiştirme butonu click olayı
darkModeToggle.addEventListener('click', function () {
if (body.classList.contains(darkModeClass)) {
disableDarkMode();
} else {
enableDarkMode();
}
});
// Temayı aktif hale getir
function enableDarkMode() {
body.classList.add(darkModeClass);
localStorage.setItem(storageKey, 'true');
}
// Temayı deaktif hale getir
function disableDarkMode() {
body.classList.remove(darkModeClass);
localStorage.setItem(storageKey, 'false');
}
});
Bu kod örneğinde, localStorage kullanarak temanın durumunu (açık veya kapalı) saklıyoruz. Sayfa yüklendiğinde, localStorage'daki değeri kontrol ediyoruz ve eğer "true" ise karanlık temayı otomatik olarak etkinleştiriyoruz.
Bu sayede, kullanıcı sayfayı kapattıktan sonra tekrar ziyaret ettiğinde tercih ettiği temayı hatırlayacaktır.