Websitesine kolayca dark mode eklemek

Daha önce dark mode hakkında bir yazı eklemiştim, “Javascript ile siteyi ziyaret eden cihazın karanlık modu(koyu mod) kulanıp kullanmadığını sorulamak“. Bu yazımda herhangi bir web sitesine veya uygulamaya cihazın kullandığı modu da göz önünde bulundurarak çalışan dark mode seçeneği eklemeyi göstereceğim.

Dark mode/Gece modu günümüzde tüm mobil cihazlarda ve hemen hemen tüm uygulamalarda mevcut olan bir seçenek. Gece modunu kullanmanın daha az enerji harcadığını ve enerji tasarrufu olduğunu da unutmamak lazım,

Aşağıda 3 kodumuz var 1. JavaScript ve 2. CSS ve 3. HTML.

JavaScript

/*gece modu*/ (function(window, document, undefined){
  "use strict";
  var nightMode = document.cookie.indexOf("nightMode=true") !== -1;
  var lightMode = document.cookie.indexOf("nightMode=false") !== -1;
  if (nightMode){
    document.documentElement.className += " night-mode";
 }else{
	 document.documentElement.className += " light-mode";
 }
  const userPrefersDark =
    window.matchMedia &&
    window.matchMedia("(prefers-color-scheme: dark)").matches;
  const userPrefersLight =
    window.matchMedia &&
    window.matchMedia("(prefers-color-scheme: light)").matches;
  //Önceden lihtmode seçilmemiş ise
  if (!lightMode){
    if (userPrefersDark){
      //Cihaz koyu mod kullanıyor ise
      document.documentElement.className += " night-mode";
   }
 }else{
	if (userPrefersLight){
      //Cihaz koyu mod kullanıyor ise
      document.documentElement.className += " light-mode";
   }
 }
})(window, document);
(function(window, document, undefined){
  "use strict";
  var nav = document.querySelector(".theme-mode");
  //HTML .theme-mode class butonu ekle
  nav.innerHTML +=
    '<span id="night-mode"><a role="button" title="nightMode" href="javascript:void(0);">🌓</a></span>';
  var nightMode = document.querySelector("#night-mode");
  nightMode.addEventListener(
    "click",
    function(event){
      event.preventDefault();
      document.documentElement.classList.toggle("light-mode, night-mode");
      if (document.documentElement.classList.contains("night-mode")){
        //nightMode cookie etkinleştir
        return (document.cookie =
          "nightMode=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/; secure;");
     }
      //nightMode cookie etkisizleştir
      document.cookie =
        "nightMode=false; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/; secure;";
   },
    false
  );
})(window, document);
/*gece modu*/

Yukarıdaki JacaScript cookie kullanan her cihaz ve tarayıcıda çalışır.

CSS

/*gece modu*/
/*gece modu site*/
.night-mode,
.night-mode body{
  background-color: #272727 !important;
  color: #fff;
}
.night-mode a{
  color: #e5e5e5;
}

/*gece modu ikon*/
.theme-mode{
  margin-right: 20px;
  display: block;
  float: left;
}
.theme-mode:hover,
.theme-mode:focus,
.theme-mode:active{
  transform: rotate(180deg);
  transition-duration: 1.2s;
}
.theme-mode a,
.theme-mode a:hover{
  text-decoration: none;
}
.theme-mode span{
  display: block;
}
.theme-mode i{
  transition: all 0.2s ease;
  text-decoration: none;
}
/*gece modu*/

CSS’i sitenizin ihtiyaçlarına göre değiştirmeniz mümkün. HTML tag .night-mode class atadığı için eğer dark mode aktif ise .night-mode altında vereceğiniz her sitil uygulanacaktır.

HTML

<span class="theme-mode"></span>

HTML kodunu nereye koyarsanız orada dark mode açıp kapama ikonu orada gösterecektir.

Örnek

https://dark-mode-simple.glitch.me

Evet gayet basit, hafif ve siteye yük getirmeyen bir dark mode uygulaması yaptık, bunu başka şekillerde de yapmak mümkün ancak bu kadar hafif ve hızlı olanı muhtemelen yoktur. JavaScript içerisinde 🌓 emojisi kullandım dilerseniz onun yerine bir görsel veya başka metin ekleyebilirsiniz. Ayrıca dak mode konusunda “HTML ile görsellerde dark mode seçeneği” başlıklı yazım da hoşunuza gidebilir.

WordPress için dilerseniz şu eklentilerden birini kullanabilirsiniz: https://wordpress.org/plugins/tags/dark-mode/