Membuat Dark Mode dengan LocalStorage

Atas permintaan salah satu pengguna facebook, beliau ingin diminta beritahukan tentang cara membuat dark mode.

Cara membuat Mode Malam di web, atau membuat night mode pada blog, kali ini menggunakan LocalStorage atau Session Storage.

Karena kebanyakan para blogger yang telah saya baca artikelnya, dan saya terapkan ke blog. Hanya sebatas dark mode saja, tidak menggunakan Cookies atau LocalStorage.
Lalu apa spesialnya LocalStorage atau Session storage?

LocalStorage hampir sama dengan Cookies, hanya saja localstorage ini dapat menyimpan data bersifat sementara pada browser, berbeda dengan cookies.
contohnya disini saya menerapkan pada pembuatan dark mode di blog.
Jadi ketika kalian mengunjungi blog saya, dan klik tombol dark mode tersebut, tentu saja akan berubah menjadi mode malam, ataupun mode gelap (Aktif). Nah ketika kalian beralih ke postingan lain yang ada di blog saya ini, dark modenya masih akan aktif karena datanya masih tersimpan (Masih Aktif). Tapi, ketika kalian tutup browsernya, dan membuka blog saya lagi, mode malam pada blog saya sudah tidak aktif lagi, karena datanya sudah terhapus.(Tidak Aktif)
(Menurut refensi yang saya baca, saya lupa webnya.)

Contoh menggunakan Session Storage / Local Storage

www.myabdurrahim.com (Dark Mode/ Night Mode Aktif)
www.myabdurrahim.com/2019/01/membuat-button-dengan-efek-slide.html (Dark Mode Masih Aktif)

Contoh tanpa menggunakan Session Storage / Local Storage (atau dark mode biasa)

www.myabdurrahim.com (Dark Mode/ Night Mode Aktif)
www.myabdurrahim.com/2019/01/membuat-button-dengan-efek-slide.html (Dark Mode Tidak Aktif)

Nah, Jika kalian ingin menerapkan ke blog kalian menggunakan session storage / local storage ini.
silahkan lanjutkan membaca sampai kebawah. Tapi, Jika kalian hanya sebatas menggunakan night mode tanpa menggunakan local storage, kalian tidak perlu untuk melanjut membaca artikel saya ini. Kalian bisa mencari tutornya di google, karena banyak blogger yang menerapkan hal tersebut. Tapi jika kalian masih ingin membacanya, ya dilanjut aja sih.

Baiklah, jika kalian masih belum mengerti maksut dari session storage, kalian bisa mencarinya digoogle. Tapi jika kalian sudah sedikit memahami maksud dari localstorage, kalian bisa melanjutkan ke point penerapan ke web kalian.

1. Silahkan login ke blog / web kalian.
2. Masuh ke Tema > Edit HTML
3. Tambah CSS dark mode dibawah ini, simpan diatas kode </head>

<style type='text/css'>
/* Dark Mode www.myabdurrahim.com */
.dark-mode body{background:#121212;color:#fff}
.dark-mode #header-wrapper{background:#232323;color:#fff}
.dark-mode #tag-div{background:#232323;color:#fff}
.dark-mode .tag-div{background:#232323;color:#fff}
</style>

Silahkan ganti kode warna yang saya tandai warna merah tersebut dengan warna gelap yang kalian suka.
Disitu saya menggunakan warna gelap dari youtube (Dark Mode Youtube). Kalian bisa mengubah warna seperti twitter.(Dark Mode Twitter).
Dan ubah juga tag div kalian, yang saya tandai dengan warna kuning tersebut, sesuai dengan tag div pada blog kalian. *Tag Div Setiap Blog biasanya berbeda-beda.

4. tambah CSS button / tombol untuk night mode, seperti pada blog ini.

<style type='text/css'>
/* Dark Mode Button www.myabdurrahim.com */
.mydark{background:#f80538;float:right;color:#fff;display:inline-block;height:30px;line-height:30px;padding:0 10px;border-radius:3px;font-size:13px;font-weight:700;animation:anim 2s ease-in infinite}
.mydark:hover{background:#444;color:#fff}
#dark-myar{width:95%;position:absolute;top:0;left:0;margin:12px 0}
@keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}}
</style>

Pengaturan CSS button-nya tergantung pada template blog ya, jadi jika buttonnya tidak sesuai, kalian bisa mengubah / menyesuaikan CSSnya. karena biasa tombol button yang saya pakai tidak sesuai atau cocok untuk diterapkan ke blog/template kalian ini.

5. Selanjutnya silahkan tambah JavaScript ini, letakkan diantara

<body> ... </body>

JavaScriptnya, karna saya ngambil JS dari blog saya ini, jadi JSnya di encrypt,
kalian bisa decrypt menggunakan obfuscator 😂

<script type='text/javascript'>
var _0x2f0e=['innerHTML','addEventListener','click','preventDefault','classList','toggle','dark-mode','setItem','removeItem','localStorage','getItem','myDarkMode','documentElement','\x20dark-mode','querySelector','#dark-myar'];(function(_0x1b79a7,_0x3a0621){var _0x966a12=function(_0x3e79fd){while(--_0x3e79fd){_0x1b79a7['push'](_0x1b79a7['shift']());}};_0x966a12(++_0x3a0621);}(_0x2f0e,0xa9));var _0x2b5b=function(_0x462a3a,_0x3e5e7f){_0x462a3a=_0x462a3a-0x0;var _0x26f27e=_0x2f0e[_0x462a3a];return _0x26f27e;};;(function(_0x512a50,_0x163dc1,_0x16c793){if(!(_0x2b5b('0x0')in _0x512a50))return;var _0x1d0913=localStorage[_0x2b5b('0x1')](_0x2b5b('0x2'));if(_0x1d0913){_0x163dc1[_0x2b5b('0x3')]['className']+=_0x2b5b('0x4');}}(window,document));;(function(_0x78db9c,_0x2d7dec,_0x44c5fe){if(!('localStorage'in _0x78db9c))return;var _0x41c733=_0x2d7dec[_0x2b5b('0x5')](_0x2b5b('0x6'));if(!_0x41c733)return;_0x41c733[_0x2b5b('0x7')]+='<li\x20id=\x22dark-mode\x22><a\x20class=\x22mydark\x22\x20role=\x22button\x22\x20href=\x22#\x22><i\x20class=\x22fas\x20fa-moon\x22></i>\x20Dark\x20Mode</a></li>';var _0x42910d=_0x2d7dec[_0x2b5b('0x5')]('#dark-mode');if(!_0x42910d)return;_0x42910d[_0x2b5b('0x8')](_0x2b5b('0x9'),function(_0x186dc3){_0x186dc3[_0x2b5b('0xa')]();_0x2d7dec[_0x2b5b('0x3')][_0x2b5b('0xb')][_0x2b5b('0xc')](_0x2b5b('0xd'));if(_0x2d7dec['documentElement'][_0x2b5b('0xb')]['contains'](_0x2b5b('0xd'))){localStorage[_0x2b5b('0xe')](_0x2b5b('0x2'),!![]);return;}localStorage[_0x2b5b('0xf')](_0x2b5b('0x2'));},![]);}(window,document));
</script>

6. Dan tambahkan tag HTML menu / buttonnya

<ul id='dark-myar'/>

Simpan dimenu blog kalian, atau simpan di dalam widget html/javascript.
tergantung dari kalian, sukanya dimana. Dan lihat blog kalian.

Untuk Demonya, kalian bisa melihat pada blog saya ini, silahkan klik tombol (Dark Mode) yang bewarna merah, jika sudah aktif. coba kalian pergi ke postingan lainnya, dan dark modenya masih aktif.
Berhubung demonya adalah blog ini, jadi sewaktu-waktu bisa saja dark mode pada blog ini hilang, atau sudah tidak terpasang lagi.

Ok, mungkin cukup sampai disini saja pembahasan artikel kali ini. jika kalian mengalami masalah / ada pertanyaan saat penerapaannya, kalian bisa bertanya di kolom komentar bawah. Terimkasih.