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.

Personal Blog.

30 komentar:

  1. tolong jelasin peletakan script dari step 1 - 6 nya bro , sebutin nyimpennya di mana aja . .

    BalasHapus
    Balasan
    1. script CSS simpan diatas < / head >
      sdangkan JS simpan di atas < / body >

      Hapus
    2. script yg di step ke 6 di simpen dimana ?

      Hapus
    3. bebas, trsrah bpak, yg jelas simpan dialam tag body aj.
      simpan disamping menu lainnya sprti blog sy juga bisa

      Hapus
    4. Komentar ini telah dihapus oleh pengarang.

      Hapus
    5. kyaknya bisa pak,
      sy gk simpan disitu

      Hapus
  2. Bebas pak,
    bisa simpan di menu
    ataupun simpan di dlam widget

    BalasHapus
  3. Keren tutorialnya Pak,
    Dark Mode emang lagi trend sekarang apalagi di aplikasi2 android.
    Mampir ke blog saya Pak, bantu kasih kritik dan saran biar blog saya sama majunya sama blog sampean Pak
    https://www.itoru.id

    BalasHapus
  4. pada saat memasukan javascript pada cara ke 5 tidak bisa gan tolong dibuat lebih detail jadi yang lain tidak bingung

    BalasHapus
  5. Balasan
    1. it works, and I've also paired it with many blogs,

      maybe you haven't added jquery yet?

      Hapus
  6. Balasan
    1. Have you done the steps that I have explained above?

      do you have jquery in your blog?
      <script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

      Hapus
  7. Gimana sih cara decrypt script JS nya? saya mau pakai yang ga di dekripsi.

    Udah saya coba decode dengan tool online di google, tapi belum ada yang berhasil.

    Mohon bantuannya.

    BalasHapus
  8. Wah tutorialnya sangat membantu untuk saya yang masih pemula gan,trimakasih.

    Mari berkunjung disiniwww.faronesia.com

    BalasHapus
  9. gan gimana kalo kode css / engga ada div , seperti ini,

    header{
    background-color:$(textrim.main.color);
    padding:40px 0px;
    }

    nulis kode tag nya gimana?
    .dark-mode .???????{background:#232323;color:#fff}

    BalasHapus
    Balasan
    1. sesuaikan aj dngan tmplate yg dipkai pak,
      coba di Inspect aj pak untuk ngeliatnya

      Hapus
  10. Gan bagi kode moonnya donk yang kata icon bulan sabit itu!

    BalasHapus

Berikan komentar anda sesuai Topik yang ada.