Günümüzde kullanıcı deneyimi dendiğinde akla gelen ilk özelliklerden biri Karanlık Mod. Hem göz yorgunluğunu azaltması hem de şık duruşuyla blogunuza modern bir hava katar. Bu rehberde, kodlama bilginiz çok az olsa bile blogunuza nasıl "Gece Modu" anahtarı ekleyeceğinizi adım adım anlatıyoruz.
Neden Bu Yöntemi Kullanmalıyız?
Hafıza Özelliği: Kullanıcı sayfayı yenilese bile seçimi hatırlanır (LocalStorage).
Hız: Ekstra kütüphane yüklemez, blogunuzu yavaşlatmaz.
Esneklik: İstediğiniz her temaya uyarlanabilir.
Adım 1: CSS Kodlarını Ekleyin
Öncelikle, karanlık mod aktif olduğunda renklerin nasıl değişeceğini tanımlamamız gerekiyor.
Blogger Paneli > Tema > Özelleştir (yanındaki ok) > HTML'yi Düzenle yolunu izleyin.
]]></b:skin>kodunu aratın ve hemen üzerine şu kodları yapıştırın:
/* Karanlık Mod Değişkenleri */
body.dark-mode {
background-color: #121212 !important;
color: #e0e0e0 !important;
}
/* Karanlık modda linklerin ve başlıkların rengini ayarlayın */
body.dark-mode a { color: #8ab4f8 !important; }
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 { color: #ffffff !important; }
/* Buton Tasarımı */
.dark-mode-btn {
position: fixed;
bottom: 20px;
right: 20px;
background: #333;
color: white;
border: none;
padding: 10px 15px;
border-radius: 50px;
cursor: pointer;
z-index: 9999;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
display: flex;
align-items: center;
font-family: sans-serif;
}
Adım 2: JavaScript Mantığını Kurun
Tercihlerin kaydedilmesi ve modun tetiklenmesi için bu kodu eklemeliyiz.
Aynı ekranda (HTML Düzenle) en alta inin ve
</body>etiketinin hemen üzerine şu kodları yapıştırın:
<script>
const btn = document.createElement("button");
btn.innerHTML = "🌙 Gece Modu";
btn.className = "dark-mode-btn";
document.body.appendChild(btn);
const currentTheme = localStorage.getItem("theme");
if (currentTheme === "dark") {
document.body.classList.add("dark-mode");
btn.innerHTML = "☀️ Aydınlık Mod";
}
btn.addEventListener("click", function() {
document.body.classList.toggle("dark-mode");
let theme = "light";
if (document.body.classList.contains("dark-mode")) {
theme = "dark";
btn.innerHTML = "☀️ Aydınlık Mod";
} else {
btn.innerHTML = "🌙 Gece Modu";
}
localStorage.setItem("theme", theme);
});
</script>
Adım 3: Kaydedin ve Test Edin
Sağ üstteki Kaydet (disk) simgesine tıklayın.
Blogunuzu görüntüleyin. Sağ alt köşede bir buton göreceksiniz.
Tıkladığınızda renkler değişecek ve sayfayı yenileseniz bile tercihiniz bozulmayacaktır.
İpucu: Temanıza Özel Düzenleme
Eğer blogunuzun yan menüsü veya alt kısmı beyaz kalıyorsa, CSS kısmına o bölümlerin ID veya Class isimlerini ekleyerek onları da karartabilirsiniz. Örn:
body.dark-mode .sidebar { background: #222 !important; }
> terminal_comments_active: