Cookie githubdan aldığım hazır bir javascript kütüphanesine bağlıdır.
Sistemi hazırlayalım...
Bize öncelikle bir button tarzı bir nesne lazım ki tıklama yaptığımızda işlem yapalım.Örnek bir oluşturalım;
<a id="theme-toggle">Gece/Gündüz</a>Evet burada bir attribute nesnemize theme-toggle id si verdik.
Şimdi sistemimize cookie library dahil edelim.Bunu cdn kullanarak yapabiliriz.Aşağıda verdiğim linkten bakabilirsiniz.
Link
Şimdi bir js oluşturalım.
document.addEventListener('DOMContentLoaded', function() {
'use strict';
var nightToggle = document.querySelector('#theme-toggle');
if (!nightToggle) return;
nightToggle.addEventListener('click', function(el) {
el.preventDefault();
document.documentElement.classList.toggle('gece-modu');
if (document.documentElement.classList.contains('gece-modu')) {
Cookies.set('darkMode', 'true', { expires: 365});
return;
}
Cookies.remove('darkMode');
}, false);
});Kodu açıklamak gerekirse nightToggle adlı değişkene bizim oluşturduğumuz attribute atıyoruz.Buna tıklama fonksiyonunda preventDefault sayesinde href değerini yoksayıyoruz.Daha sonra gece modu adında bir classi toggle ediyoruz.Yani varsa siliyoruz yoksa ekliyoruz.Eğer bu class tanımlıysa Cookie kütüphanesi ile 365 gün dolma süresine bağlı olan darkMode isimli ve değeri true olan bir cookie oluşturuyoruz.Eğer class yoksa da Cookieyi siliyoruz.Peki biz cookie varsa sayfa oto dark mode ayarlasın istiyoruz ne yapabiliriz? </head> tagı altına script tagı içerisinde verdiğim kodu girebilirsiniz.
var darkMode = Cookies.get('darkMode');
if (darkMode) {
document.documentElement.className += ' gece-modu';
}Css içerisinde örnek bir kullanım da belirtiyorum;.div {
background:#fff;
}
.gece-modu .div {
background:#1d1d1d;
} 
