Membuat Dark Mode dengan Cookie di Blogger

Layaknya fitur dark mode di android, tampilan blogger juga dapat dibuat dark mode atau mode malam. Tujuannya agar layar tidak menyilaukan mata.

Dark mode yang akan saya bagikan menggunakan fitur cookie, yang berfungsi agar tampilan tetap pada kondisi normal atau dark (sesuai pilihan) meskipun kita reload page atau membuka link di blog/website.

Tahapan Membuat Dark Mode:

1. Tambahkan kode berikut sebelum tag  </body>

<div class='Switchbtn'><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>

2. Tambahkan kode CSS berikut sebelum tag  </head>

<style type='text/css'>

/* Night Mode */

.nightly{color:#999;font-size:13px;text-transform: uppercase;}

.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:12px;bottom:62px}

.togglenight{display:none;}

.togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;height:10px;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:#4787edc9;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='%23fff'/%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:26px;height:26px;top:-8px;left:0;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);background-color: #333;}

.togglenight-switch:checked + .togglenight-btn{background:rgb(189 178 165 / 99%)}

.togglenight:checked + .togglenight-btn:after{content:'';left:50%;background:#222 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;background-color:#333;}

.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 .header{background:#059cff}

.nightmode .title{color:#8e05a2}

.nightmode .aboutbox h3{color: #f8f8f8}

</style>

3. Perhatikan kode CSS paling bawah pada tahap 2 diatas!

.nightmode .header{background:#059cff}

.nightmode .title{color:#8e05a2}

.nightmode .aboutbox h3{color: #f8f8f8}

Silahkan ganti .header atau .title atau .aboutbox  sesuai ".class" di blog anda. Dapat juga ditambahkan sejumlah ".class" yang ingin diubah warnanya ketika dark mode aktif.

{background:#059cff}:Merupakan warna latar belakang.

{color: #f8f8f8}:Merupakan warna tulisan. Silahkan ganti sesuai keinginan.

4. Simpan

Anda bisa melihat hasilnya pada blog saya.