Dark Mode Pada Situs
Dark mode atau night mode akhir-akhir ini sangat populer, beberapa situs terkenal seperti twitter,whatsapp,instagram dan bahkan hampir seluruh produk google memiliki fitur dark mode.
Fitur dark mode bukan semata-mata hanya untuk memperindah tampilan saja, warna gelap yang ada pada dark mode diklaim lebih nyaman di mata dibanding warna putih dan juga hemat baterai, bagi yang sudah memiliki layar oled.
Situs-situs dan blog-blog kecil pun sudah banyak yang memiliki fitur dark mode , termasuk blog saya. maka dari itu pada artikel ini saya ingin membagikan tutorial Membuat Dark Mode, bagi kalian yang belum punya dark mode di situs atau blog kalian, kalian bisa baca tutorial ini.
Seperti yang saya tulis diatas, tidak hanya memperindah blog kalian, fitur dark mode juga membuat pengunjung lebih nyaman dan pastinya hemat baterai.
Dark Mode Local Storage
Tutorial dark mode yang saya bagikan kali ini menggunakan local storage, apa itu local storage dan apa kegunaanya? jadi local storage hampir sama dengan cookies.
local storage adalah mekanisme yang disediakan dari browser, untuk menyimpan data terstruktur di sisi klien. Mekanismenya mirip dengan HTTP Session Cookies.
Jadi, jika kalian mengunjungi blog saya dan mengaktifkan dark mode, tampilan akan berubah menjadi gelap dan ketika kalian beralih ke halaman atau artikel lain pada blog saya, tampilannya akan tetap gelap dan tidak akan balik ke tampilan awal lagi, singkatnya begitulah.
Berbeda dengan dark mode tanpa local storage, ketika kalian beralih ke halaman atau artikel lain, tampilannya akan berubah lagi ke awalnya jadi kalian harus mengaktifkan dark mode kembali. oke tanpa basa basi lagi, langsung saja ke tutorialnya.
Tutorial Buat Mode Gelap Blogger
Jika kalian tertarik menerapkannya pada blog atau situs kalian, simak tutorial berikut.
- Pertama, tambahkan dahulu CSS berikut ke blog kalian. taruh di atas ]]></b:skin>.
/* Dark Mode */ .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} -
Lalu, tambahkan CSS untuk tombol dark mode. taruh diatas ]]></b:skin>.
/* Dark Mode Button */ .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)}} -
Kemudian, tambahkan JavaScript berikut. taruh di antara <body>...</body>
<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> -
Terakhir, taruh kode botton atau tombolnya. kalian bisa taruh sesuka kalian, dimana tombol akan muncul. contoh kalian bisa menaruhnya di </header>
<ul id='dark-myar'/> - Jangan lupa simpan tema kalian.
Akhir Kata
Mungkin itu saja tutorial kali ini yang berjudul Cara Membuat Dark Mode Dengan Local Storage , jika ada yang kurang jelas atau ada yang ingin ditanyakan, kalian bisa komen dibawah. sekian, terimakasih.