Merhabalar,
Gün geçtikçe daha da çok popülerleşen gece (dark) modu kullanıcıların oldukça hoşuna giden bir özellik haline gelmektedir. Göz yormayıp daha sade, koyu bir tasarım çoğu kullanıcının tercihi olmaya devam ediyor.
Hâl böyle olunca web geliştiriciler ve web site sahipleri de sitelerine bu eklentiyi ekletmek istiyor. Bunu tek tek tüm elementlere uygulamanın çok zor olduğunu bilmek zor değil. Bunun için geliştiriciler tarafından çeşit çeşit kolaylıklar sağlanıyor. Bunlardan birisi olan darkmode.js kullanımından bahsedeceğim.
Üzerine tıklayıp kendi sitesine gittiğiniz zaman 2 çeşit kurulumu olduğunu göreceksiniz. Her zaman tavsiyem CDN ile hızlıca kolay bir şekilde dosyasını çağırmanızdır. Dilerseniz farklı olarak npm ile de darkmode.js kurulumunu yapabilirsiniz.
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
function addDarkmodeWidget() {
new Darkmode().showWidget();
}
window.addEventListener('load', addDarkmodeWidget); // İlk açılışta gece modunda açılmasını sağlar. Bu satırı silebilirsiniz
</script>Yukarıdaki kod parçasını sitenizin body etiketinin bitişine eklemeniz karanlık gece modunu kullanabilmeniz için yeterli olacaktır. İlk açılışta açmak istemiyorsanız son kod satırını silebilirsiniz.
Sitenizde varsayılan özelliklere ve görünüme sahip bir geçiş butonu çıkartacaktır. Tabii ki de bunu özelleştirme imkanı sağlıyor bize. Kendi sitesinde bulunan dökümantasyonlardan bir örneği nasıl özelleştirebileceğinizi göstermek için açıklayacağım.
<script>
function addDarkmodeWidget() {
new Darkmode().showWidget();
}
const options = {
bottom: '64px', // Aşağıdan boşluk, varsayılan: '32px'
right: 'unset', // Sağdan boşluk, varsayılan: '32px'
left: '32px', // Soldan boşluk, varsayılan: 'unset'
time: '0.5s', // Geçiş süresi, varsayılan: '0.3s'
mixColor: '#fff', // Karıştırma rengi, varsayılan: '#fff'
backgroundColor: '#fff', // Arkaplan rengi, varsayılan: '#fff'
buttonColorDark: '#100f2c', // Gece modunda buton arkaplan rengi, varsayılan: '#100f2c'
buttonColorLight: '#fff', // Normal modda buton arkaplan rengi, varsayılan: '#fff'
saveInCookies: false, // Çerezleri kaydet, varsayılan: true,
label: '🌓', // Buton içine yazılan metin, varsayılan: ''
autoMatchOsTheme: true // os theme eklentisi varsa otomatik eşleştir, varsayılan: true
}
const darkmode = new Darkmode(options);
darkmode.showWidget();
</script>CDN üzerinden dosyayı çağırdıktan sonra diğer script etiketimiz bu şekilde oluşabilir. Boşluk değerleri, metin içerikleri, renkler gibi özelleştirebileceğiniz alanları güncelleyebilirsiniz.
Gece modunu açtığınızda body etiketine “darkmode–activated” class niteliği atanmaktadır. Bu sayede gece modu açıkken değiştirmek istemediğiniz veya farklı bir şekilde güncellemek istediğiniz elementlere de aşağıdaki gibi Css üzerinden değerler verebilirsiniz.
.darkmode--activated p, .darkmode--activated li {
color: #000
}
.darkmode--activated footer {
background-color: #333
}Bu şekilde özelleştirme işleminizi de detaylandırabilirsiniz. Gittikçe popüler olmaya devam eden bu özelliğin bir gün sizin de işinize yarayacağını düşünüyorum. Umarım çalışma mantığını anlamışsınızdır.
Mutlu Kodlamalar 🙂
