Web Sitesine Dark Mode / Gece Modu Nasıl Eklenir?

Karanlık modlar göz yormayan görünümüyle hayatımızın her alanına giriyor. YouTube, Whatsapp, Android, IOS gibi popüler uygulamalar ve işletim sistemleri bile karanlık mod kullanımı ile birlikte geliyor. Peki web sitemize karanlık modu eklemek ve sitemizin sayfalarına entegre etmek istediğimizde bunu nasıl yapıyoruz?

Web sitenize karanlık modu / gece modu eklemek için Darkmode.js adındaki bir JavaScript kütüphanesinden faydalanıyoruz. Buradaki kütüphane CSS’in mix-blend-mode özelliğini kullanıyor. Birkaç satır kodu web sitenize eklediğinizde ekranın altında, sitenizin modunu değiştirebileceğiniz küçük bir ikon görünüyor. Sitenize gelen ziyaretçiler bu ikona tıklayarak web sitenizi hızlı bir şekilde karanlık moduna çevirebiliyorlar.

Web Sitesine Karanlık Modu Nasıl Eklenir?

Aşağıdaki scripti web sitemize entegre ediyoruz önce. Bu dosyayı kendi sunucunuza da yükleyebilirsiniz isterseniz.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>

Ardından aşağıdaki kodları, üst satırdan sonra ya bir JavaScript dosyasına ya da inline script olarak sayfamıza ekleyelim. Sadece new Darkmode().showWidget(); kodunu da ekleyebiliriz, ama kodu diğer seçenekler için aşağıdaki gibi genişletebiliriz.

var 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: false, // default: true,
  label: '🌓', // default: ''
  autoMatchOsTheme: true // default: true
}

const darkmode = new Darkmode(options);
darkmode.showWidget();

Darkmode’u web sitenize uyguladığınız zaman, her nesnenin karanlık moduna göre uyarlamasını yapacaktır. Ancak siz bazı öğelerin bu karanlık moddan etkilenmesini istemeyebilirsiniz. Bu tip durumlar için Darkmode.js size bazı alternatifler sunuyor. Bu kodları, web sitelerinizde gece modundan etkilenmesini istemediğiniz öğelere uygulayabilirsiniz.

.darkmode--activated p, .darkmode--activated li {
  color: #000;
}

.button {
  isolation: isolate;
}
<span class="darkmode-ignore"><span>
</span></span>

Popular Eğitimler

jQuery Owl Carousel Gelişmiş Responsive Slider Kullanımı

Mobil cihazlarla uyumlu, responsive ve WordPress sitenize entegre edebileceğiniz bir slider arıyorsanız,…

Responsive Web Design

Responsive web siteleri akıllı telefonların ve  tabletlerin yaygınlaşmasıyla hayatımızda büyük bir önem…

CSS Carousel Logo Slider Efekti

Herhangi bir Java Script kodu kullanmadan, sadece CSS kullanarak HTML ve CSS…

CSS Nedir ve Nasıl Kullanılır?

CSS, HTML ile kodladığımız sayfaları görsel olarak güzelleştirmemizi sağlar. CSS, evin dekoru…

Ücretsiz Cloudflare CDN Kurulumu, Kullanımı ve Ayarları

Cloudflare, ücretsiz CDN hizmeti veren bir firma ve web sitelerimizin performansını artırmayı…

Tüm Tarayıcılarla Uyumlu Smooth Scrolling

Ekrana sığmayan uzun web sayfalarında, anchor linklere tıklandığında Smooth Scrolling denilen yumuşak…