Kategoriler
Kodlama

Websitesine kolayca dark mode eklemek

Herhangi bir web sitesine veya uygulamaya dark mode(Koyu renk, karanlık tema veya gece modu) uygulamak.

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";
  }
  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";
    }
  }
})(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("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/

wolkanca.com’da Websitesine kolayca dark mode eklemek veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, Websitesine kolayca dark mode eklemek için ya da değil DM kapısı her daim açık. Yazıyı beğendiyseniz paylaşın, daha fazla ilgili gönderi için hemen aşağıdaki menülere göz gezdirebilirsiniz, okuduğunuz için teşekkürler, saygılar sevgiler.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO - wolkanca mahallesi gmail sokak nokta com.