Siteme Nasıl Gece Modu / Dark Mod Eklerim?

Webinsan dahil olmak üzere modern sitelerin bir çoğu temalarına gece modunu entegre ediyor. Eğer siz de sitenizde gece modu kullanmak istiyorsanız bunun için kullanabileceğiniz iki yöntemi sizler için derledik 🙂 .

jQuery Kütüphanesi ile Nasıl Hazırlarım?

Gece Modu için CSS Dosyasını Oluşturun

Öncelikle gece modu için bir CSS dosyası oluşturmanız gerekiyor. Bunun için body tagına gece modunu belirtecek bir class yerleştirmeniz gerekecek.

<body class="dark">

Bu classı yerleştirdikten sonra tasarımını gerçekleştiriyoruz. Tasarımı yaparken class veya id lerin başında .dark eklememiz gerekiyor ki normal tasarımla karışmasın.

Gece Moduna Geçmeyi Sağlayacak Butonu Ekleyin

Bunun için bir font-awesome iconu kullanabilirsiniz. Biz bu işlemleri yaparken font awesome iconu üzerinden anlatacağız. Burada önemli olan iconun kendine ait olan bir id’ye sahip olması, bu sayede JS işlemlerini yapabileceğiz. Belirlediğimiz spesifik id “gece-modu” olsun.

<i class="fa fa-moon" id="gece-modu">

Dinamik Olmasını Sağlamak İçin Bir JS Dosyasını Oluşturun

Bunun için JQuery kütüphanesinden faydalanacağız. Eğer siz de kullanmak istiyorsanız bu linkten jQuery kütüphanesini edinebilirsiniz.

Öncelikle belirttiğimiz id’li yere tıklandığında fonksiyonlarımızın çalışmasını sağlayacağız.

 jQuery('body').on('click','#gece-modu',function(event){
 var main = $(this);
//kodlar buraya
});

Şimdi ekleyeceğimiz fonksiyonları özetleyelim.

Eğer fa fa-moon var ise gündüz modu açık demektir. O yüzden tıkladığımızda işaret güneşe dönecek ve de body’ye belirlediğimiz classı ekleyecek biz “dark” olarak belirlemiştik.

O zaman dosyamız böyle olur:

jQuery('body').on('click','#gece-modu',function(event){
 var main = $(this);
if($("#gece-modu").hasClass("fa-moon")){
$("#gece-modu").removeClass("fa-moon").addClass("fa-sun");
$("body").addClass("dark");
}else{
$("#gece-modu").removeClass("fa-sun").addClass("fa-moon");
$("body").removeClass("dark");
}
});

Bu veriyi saklamak için ise çerez kullanabiliriz.

jQuery('body').on('click','#gece-modu',function(event){
 var main = $(this);
if($("#gece-modu").hasClass("fa-moon")){
$("#gece-modu").removeClass("fa-moon").addClass("fa-sun");
$("body").addClass("dark");
$.cookie("mod", "gece",{path:'/' });
}else{
$("#gece-modu").removeClass("fa-sun").addClass("fa-moon");
$("body").removeClass("dark");
$.cookie("mod", "gunduz",{path:'/' });
}
});

Evet böylece butona tıkladığımızda gerekli değişiklerin olmasını sağladık. Şimdi de çerezi algılayıp sayfayı ona göre yüklemeyi nasıl yapacağımızı göstereceğim.

var mod = $.cookie("mod");
if(mod == "gece"){
$("body").addClass("dark");
$("#gece-modu").removeClass("fa-moon").addClass("fa-sun");
}else if(mod == "gunduz"){
$("body").removeClass("dark");
$("#gece-modu").removeClass("fa-sun").addClass("fa-moon");
}

Evet anlatım bu kadar. Burada anlattığım şekilde kurulum yaparsanız gece modunuz sorunsuz bir şekilde çalışacaktır. Eğer kurulumu gerçekleştirirken bir sorun yaşarsanız bu durumu yorum kısmı üzerinden belirtebilirsiniz.

gece modu

Kütüphane Kullanarak Gece Modu Yapma

Eğer kendiniz sıfırdan kodlamakla uğraşmak istemezseniz bunun için mevcut kütüphaneler var. Bu kütüphanelerden en yaygını ise sandoche tarafından hazırlanan Darkmode.js kütüphanesi. Github üzerinden kütüphaneyi incelemek için tıklayın.

Darkmode.js Nasıl Kurulur?

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>

Kütüphaneyi ekliyoruz.

const options = {
bottom: '64px', // default: '32px'
right: 'unset', // default: '32px'
left: '32px', // default: 'unset'
time: '0.5s', // default: '0.3s'
mixColor: '#fff', // default: '#fff'
backgroundColor: '#fff', // default: '#fff'
buttonColorDark: '#100f2c', // default: '#100f2c'
buttonColorLight: '#fff', // default: '#fff'
saveInCookies: true, // default: true,
label: '🌓', // default: ''
autoMatchOsTheme: true // default: true
}
const darkmode = new Darkmode(options);
darkmode.showWidget();
window.addEventListener('load', addDarkmodeWidget);

Javascript kodlarının kurulumunu yapıyoruz. Ayarları burdan yapabilirsiniz.

Gece Modu Bozuk Oldu, Nasıl Düzeltirim?

Eğer gece modu butonuna tıklarsanız kütüphane body tagına otomatikmen darkmode--activated classını eklemektedir. Düzenlemeleri yapmak için CSS kodlarınızın başına .darkmode--activated ekleyebilirsiniz. Eğer bir yerde dark mode kullanılsın istemiyorsanız oranın classına darkmode-ignore eklemeniz yeterli olacaktır.

 

Kütüphane kullanımı çoğu ayak işinden kurtulmanızı sağlayacaktır. Ama ben kendinize ait olanı kullanmanızı tavsiye ediyorum. Karar yine de size kalmış 😉

 

Ayarlamaları yaparken bir sorunla karşılaşırsanız yorum yaparak sorunu belirtebilirsiniz.

Emircan Yıldırım

Webinsan Blog - Web'deki İnsan! Kurucusu & Yöneticisi

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir