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>