Tombol Dark/Night Mode Pure JavaScript Plus Cookies

Tombol Dark/Night Mode Pure JavaScript Plus Cookies

Tutorial memasang tombol Mode Malam di Blogspot dengan menggunakan Vanila JavaScript dilengkapi dengan Cookies untuk menyimpan fungsi agar ketika halaman di reload/muat ulang atau menuju ke Page selanjutnya tetap dalam kondisi Night Mode (Mode Malam).


Untuk memaksimalkan Pemasangan Fitur Dark Mode ini kalian harus sedikit paham tentang CSS dan HTML begitu juga dengan Markup Template Blog kalin.

Karena dalam pengaplikasiannya setelah memasukan Script Night Mode kalian harus menentukan bagian mana yang akan dirubah warnanya (menjadi dark mode), berikut langkah-langkahnya.


Memasang Fitur Dark Mode di Blogger


  1. Masuk ke Edit HTML
  2. Cari tag </body
  3. Lalu masukan script dark mode dibawah ini tepat diatasnyya
    4. 
<script>
// Night Modde With Cookies Pure JavaScript
// INDOASIAP.BLOGSPOT.COM
// ----------------------
function handleDocumentLoad() {
  var style = document.getElementById("MODESTYLE")

  checkCookie();

  function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) === 0) {
        return c.substring(name.length, c.length);
      }
    }
    return ""; 
  }

  function checkCookie() {
    var nightmode = getCookie("lights");
    if (nightmode == "off") {
      lightsOff();
    } else {
      lightsOn();
    }
  }

  function lightsOff() {
    document.cookie = "lights = off;  expires = Fri, 31 Dec 9999 23:59:59 GMT";
    style.setAttribute('class', 'DarkMode');
  }

  function lightsOn() {
    document.cookie = "lights = on;  expires = Fri, 31 Dec 9999 23:59:59 GMT";
    style.setAttribute('class', 'LightMode');
  }

  document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("DarkModeOff").addEventListener("click", lightsOn);
    document.getElementById("DarkModeOn").addEventListener("click", lightsOff);
  });

}

handleDocumentLoad();
</script>
  4. Setelah memasang script dark mode diatas, cari lagi tag <body
  5. Disini, pentingnya harus sedikit paham tentang HTML
  6. Setelah ketemu, tambahkan id MODESTYLE
  7. Sehingga nanti hasilnya menjadi <body id='MODESTYLE' .......
  8. Sampai disini pemasangan Scrip Night Mode Sudah Selesai

cara mengaktifkan Fitur Night Mode


Untuk mengaktifkannya kita akan menggunakan Tombol Button dan untuk penempatannya BEBAS, bisa di Menu Navigaion, Header, Footer, dll.

Berikut kode HTML Button Untuk Mengaktifkan JavaScript Dark Mode
Kalian bisa atur sendiri style buat tombol butonnya, tapi jika bingung bisa coba
style simpel berikut.


<div class='DarkModebtn'>
<button type="button" id="DarkModeOff">Turn Off Night Mode</button>
<button type="button" id="DarkModeOn">Turn On Night Mode</button>
</div>



<stle>
html #MODESTYLE.DarkMode{background:#333333}
.DarkModebtn{position:fixed;top:30%;right:0}
html #MODESTYLE:not(.DarkMode) .DarkModebtn #DarkModeOff,html #MODESTYLE.DarkMode .DarkModebtn #DarkModeOn{display:none}
html #MODESTYLE.LightMode .DarkModebtn #DarkModeOn{display:block}
</stle>

Selanjutna langkah terakhir tahap pengaturang warna menggunakan CSS, tahap ini mungkin akan sedikit pusing karena perlu tau Struktur Template, Tag HTML dan CSS.

Jika pemasangan ID pada tag body tadi sudah benar, berikut saya kasih contoh CSS untuk Merubah Template Blog Menjadi Dark Mode


Contoh HTML yang akan dijadikan Dark Mode



<body id="MODESTYLE">
<header><h1>HEADER</h1></header>
<div class="wrapper">
<main>
<div class="content"></div>

<aside class="sidebar"></aside>
</main>
</div>
</body>

Contoh CSS Default Template



<style>
body {
 background:#bbb
}
header {
 background:#ffffff
}
header h1{
 color:#333333
}

.wrapper .content{
 background:#ffffff;
 color:#333333
}

.wrapper .sidebar{
 background: PUIH;
 color: HITAM
}
</style>

Contoh CSS Dark Mode



<style>
#MODESTYLE.DarkMode{
 background:#666666
}
#MODESTYLE.DarkMode header{
 background:#333333
}
#MODESTYLE.DarkMode header h1{
 color:#ffffff
}
#MODESTYLE.DarkMode .wrapper .content{
 background:#333333;
 color:#ffffff
}
#MODESTYLE.DarkMode .wrapper .sidebar{
 background: HITAM;
 color: PUTIH
}
</style>

  • CSS diatas akan aktif apabila Tombol Dark Mode ON
  • Ketika Tombol
    <button type="button" id="DarkModeOn">Turn On Night Mode</button>
    di Klik maka tag <body akan ditambah CLASS DarkMode
  • Apabila Tombol
    <button type="button" id="DarkModeOff">Turn Off Night Mode</button>
    di Klik maka CLASS DarkMode akan diganti menjadi LightMode / default

Nah setelah semua pemasangan JavaScript, ID dan Tombol Swith Button, selanjutnya tinggal mengatur CSS agar blog menjadi Dark / Night Mode.

Jika ingin semua Gambar dan warna yang mencolok menjadi hitam putih bisa menggunakan CSS dibawah


Cara Membuat Semua Bagian Menjadi Hitam Putih



<stle>
#MODESTYLE.DarkMode{
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter:grayscale(100%);
}
</style>


Demo Dark Mode Pure JavaScript