Bildiğiniz üzere gece modu uygulaması günümüzde oldukça popüler, okuma alışkanlıkları değiştikçe ve geliştikçe bu tarz güzel özellikler arayüz tasarımlarında karşımıza çıkmakta. Basit bir şekilde zaman ayarlı gece modu oluşturabiliriz, üstelik bunu yaparken o kadar fazla kod bilgisi bilmenize gerek yok.
Önce zamana göre gece modunu aktif eden JavaScript kodumuzu şu şekilde paylaşıyorum. Burada belirttiğimiz zaman aralıklarında dark-mode.css devreye girecek. Yani akşam saatlerinde otomatik olarak bütün site kararacak.
function getStylesheet() {
var currentTime = new Date().getHours();
if (0 <= currentTime && currentTime < 7) {
document.write("<link rel='stylesheet' href='/css/dark-mode.css' type='text/css'/>");
}
if (20 <= currentTime && currentTime < 24) {
document.write("<link rel='stylesheet' href=/css/dark-mode.css' type='text/css'/>");
}
}
getStylesheet();
Bunun hemen ardından, yapmanız gereken haliyle web siteniz için biraz css yazmak, temanız veya kullandığınız css dosyasını alıp genellikle beyazları siyah yapmak işinizi fazlasıyla görür. Bunun dışında yazı alanlarını da beyaz yapacaksınız.
Gelelim kullandığınız logo gibi şeylere, bunlar içinde css’de renkleri ile oynayacağız. Mozillanın bu konuda belgelendirmesini kullanabilirsiniz.
filter: invert(100%) saturate(0);
Ben bunlarla uğraşmak istemiyorum diyorsanız, aktif olarak geliştirilen darkmode.js sizin işinizi oldukça görecektir ancak gene bazı noktalarda CSS yazmak zorundasınız.