Cara Membuat Dark Mode With Cookie di Blog

Update artikel lagi nih :3 kali ini saya rajin amat update post tiap hari yah :v padahal mah main terjadwal aja sih :/ so pada tutorial kali ini saya akan membuat Dark Mode pada website or blog kalian sehingga membuat web or blog menjadi lebih interative lagi.

Disini saya memanfaatkan localStorage dari browser sehingga tidak terhalang expired dari cookie sendiri dan kodenya juga simple karena saya buat sendiri berdasarkan kemampuan :v

Cara Membuat Dark Mode With Cookie

Pertama buka Blog > klik Tema > klik Edit HTML

Kedua tambahkan kode berikut tepat diatas kode </body>

<script>//<[CDATA[
$('body').toggleClass(localStorage.toggled);
$('#noticeme').click(function(){
  if(localStorage.toggled != 'darkmode'){
     $('body').toggleClass('darkmode', true)
    localStorage.toggled = 'darkmode';
     }else{
    $('body').toggleClass('darkmode', false)
       localStorage.toggled =''
  }
})//]]>
</script>

Ketiga kita buat kode pemanggil js tersebut, tambahkan kode dibawah sesuai kalian mau dimana

body.darkmode {
  background: #0c0029;
}

Selanjutnya buat bagian mana yang akan dijadikan Dark Mode nya

<div id='noticeme'> Click me senpai !!</div>

Terakhir simpan dan lihat tampilan nya

Bagi kalian yang ingin melihat hasilnya klik tombol berikut

Demo

Bagi kalian yang punya cara lain bisa berkomentar untuk berdiskusi

Jangan takut berkreasi sendiri biar lebih paham lagi kodenya :D