Cara Membuat Mode Malam pada Blog dengan Cookie - Oke guys, belakangan ini saya perhatikan banyak sekali website atau blog maupun aplikasi Android yang memiliki fitur mode malam atau night mode, seolah-olah fitur mode malam sudah menjadi kebutuhan dasar dalam suatu web atau aplikasi. Setuju, saya setuju jika fitur mode malam menjadi fitur krusial atau fitur utama, dengan adanya fitur mode malam diharapkan pengunjung lebih nyaman membaca sebab bias cahaya yang masuk ke dalam mata lebih sedikit dibanding tanpa mode malam.
Nah, saya sengaja membuat artikel ini dikarenakan saya sendiri baru saja memasang fitur mode malam pada blog ini. Fitur mode malam ini menggunakan cookie apa itu cookie? Cookie bukanlah kue, cookie atau kuki adalah serangkaian data yang disimpan pada memori komputer melalui web, artinya ketika mode malam ini diaktifkan maka tampilannya akan menjadi gelap dan tetap gelap bahkan ketika sudah di-refresh, kok bisa? Jelas, karena cookie. Ohya, kode dalam post kali ini saya kutip dari blog Arlinadzgn dengan sedikit perubahan dibagian bentuk, misalnya saya beri ikon SVG agar terlihat lebih menarik.
Tahap 1: Memasang Script/JavaScript
Silahkan salin kode dibawah ini lalu tempel di atas kode<div class='Switchbtn'>
<span class='nightly'/> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/>
<label class='togglenight-btn' for='nightmode'/></div>
<script type='text/javascript'>
//<![CDATA[
// Night Mode
$("#nightmode").click(function(){$("body").toggleClass("nightmode")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode"):($("body").toggleClass("nightmode",!1),localStorage.toggled="")});
//]]>
</script>Tahap 2: Memasang CSS
Lalu salin kode di bawah ini, setelah itu tempel di atas kode<style type='text/css'>
/* Night Mode */
.nightly{color:#999;font-size:13px}
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:1000;right:45px;top:16px}
.togglenight{display:none;}
.togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;height:20px;position:relative;cursor:pointer;margin-left:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.togglenight + .togglenight-btn:after,.togglenight + .togglenight-btn:before{position:relative;display:block;content:"";width:50%;height:100%}
.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
.togglenight-switch + .togglenight-btn:after{content:'';border-radius:100px;background:#fff url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.55,18.54L4.96,19.95L6.76,18.16L5.34,16.74M11,22.45C11.32,22.45 13,22.45 13,22.45V19.5H11M12,5.5A6,6 0 0,0 6,11.5A6,6 0 0,0 12,17.5A6,6 0 0,0 18,11.5C18,8.18 15.31,5.5 12,5.5M20,12.5H23V10.5H20M17.24,18.16L19.04,19.95L20.45,18.54L18.66,16.74M20.45,4.46L19.04,3.05L17.24,4.84L18.66,6.26M13,0.55H11V3.5H13M4,10.5H1V12.5H4M6.76,4.84L4.96,3.05L3.55,4.46L5.34,6.26L6.76,4.84Z' fill='%2386d993'/%3E%3C/svg%3E") center / 17px no-repeat;transition:left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;width:20px;height:20px;top:0px;left:0;box-shadow:0 1px 2px rgba(0,0,0,0.16), 0 1px 6px rgba(0,0,0,0.23)}
.togglenight-switch:checked + .togglenight-btn{background:rgba(255,255,255,.15)}
.togglenight:checked + .togglenight-btn:after{content:'';left:55%;background:#1d2129 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z' fill='%23fff'/%3E%3C/svg%3E") center / 17px no-repeat}
.nightmode{background:#202124;color:rgba(255,255,255,.7)}
.nightmode a{color:rgba(255,255,255,.7)!important}
.nightmode a:hover{color:rgba(255,255,255,.4)!important}
.nightmode class atau id baru
.nightmode class atau id baru
</style>Oke guys saya jelasin sedikit soal kode CSS di atas. Kalian lihat kode yang saya blok merah kan? Nah, kalian hapus lalu ganti jadi id atau class yang mau diubah jadi gelap, misalnya nih kalian mau ubah header dan sidebar jadi gelap dan tulisan nya berwarna putih maka kode nya jadi
.nightmode #header-wrapper {background:#000;color:#fff}
.nightmode #sidebar-wrapper {background:#000;color:#fff}Ini cuma contoh ya, setiap template berbeda kode id maupun class nya, kalian bisa berkreasi sesuka hati. Lalu yang terakhir kalian bisa ubah posisi toggle nya dengan cara edit-edit kode yang saya blok berwarna hijau di atas.
Gampang kan buatnya? Oh iya dong, kalau masih bingung bisa komentar saja dibawah, akan saya balas secepatnya.
Untuk lihat hasilnya silahkan lihat blog ini, tombol toggle ada di kanan atas. Sekian tutorial tentang Cara Membuat Mode Malam pada Blog dengan Cookie.
