Cara Menambah Dark Mode Pada Blog



Dark Mode atau Night Mode adalah tampilan front-end dengan latar belakang berwarna gelap. Dengan adanya fitur ini maka akan memberikan kepuasan tersendiri bagi pengunjung Blog.


Fitur ini merupakan kebalikan dari apa yang umumnya dipakai seperti latar terang dan teks berwarna gelap. Jadi jika ada pengunjung Blog yang tidak menyukai latar terang maka mereka bisa memanfaatkan Fitur Dark Mode dengan menekan tombol button yang sudah disediakan oleh yang punya Blog/Web.

Belakangan ini Dark Mode cukup populer, situs - sistus besarpun ambil andil untuk menggunakannya. Seperti facebook, whatsapp, youtube, twitter, chrome, dan website-website lainnya.

Manfaat Dark Mode

Bukan tanpa alasan, Dark Mode atau Night Mode memang memiliki sejumlah manfaat dibandingkan tampilan pada umumnya. Menerapkan Dark Mode pada Blog atau Website mampu membantu mengurangi kelelahan pada mata yang terjadi akibat terus menerus menatap tampilan berwana putih. Blog warna terang seperti putih, dengan latar gelap, bisa membuat seseorang menjadi lebih fokus.

Menambahkan Dark Mode Pada Blog 

Sudah tahukan apa itu Dark Mode serta manfaatnya? jika belum tahu silahkan baca kembali yang sudah saya jabarkan di atas. Terkait dengan pembahasan ini yaitu cara menambahkan Dark Mode pada blog, saya akan memberikan tutorialnya kepada sobat, mari ikuti caranya di bawah ini.

Baca juga: Cara Memasang Form WhatsApp Booking di Blog

Pertama-tama yang harus sobat lakukan yaitu masuk lewat jendela rumah si janda, hehehe... maaf bercanda. Maksudnya masuk pada Blog sobat, setelah berada di dalam😜 kemudian pilih Theme - EDIT HTML, maka akan terbuka dasboard untuk menempelkan CSS, HTML serta JavaScript di dalamnya. Lalu bagaimana cara selanjutnya?

1. Tambahkan JavaScript, berikut ini tepat di atas code </head> atau &lt;!--</body>--&gt;&lt;/body&gt; atau </body>

<script>
//<![CDATA[
function LMcheckCheckbox() {
 document.querySelectorAll(".checkbox").forEach(function (e) {
  "darkmode" === localStorage.getItem("mode") ? e.checked = !0 : e.checked = !1
 })
}
function darkMode() {
 localStorage.setItem("mode", "darkmode" === localStorage.getItem("mode") ? "light": "darkmode"),
 "darkmode" === localStorage.getItem("mode") ? document.querySelector("body").classList.add("darkmode") : document.querySelector("body").classList.remove("darkmode"),
 LMcheckCheckbox()
}
function darkModeHide() {
 document.querySelectorAll(".darkmode-switch").forEach(function (e) {
  e.parentNode.removeChild(e)
 })
}
LMcheckCheckbox(),
"undefined" != typeof linkMagzSetting && void 0 !== linkMagzSetting.tombolDarkmode || (linkMagzSetting = {
 tombolDarkmode: !0
}),
0 == linkMagzSetting.tombolDarkmode && darkModeHide();
"darkmode" === localStorage.getItem("mode") ? document.querySelector("body").classList.add("darkmode") : document.querySelector("body").classList.remove("darkmode");
//]]>
</script>


2. Tambahkan CSS Button atau Switch, berikut tepat di dalam code <style> ... </style> atau <b:skin<![CDATA[ ... ]]></b:skin>
.type-dark{top:32%;position:absolute;right:10%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.type-dark .switch-title{font-size:10px;font-size:.625rem;margin-right:4px;text-transform:uppercase}
.type-dark .switch-title{color:#98ede1}
.type-dark .switch-title:before{content:"Dark Mode"}
.type-dark .switch{position:relative;display:inline-block;width:38px;height:14px;vertical-align:middle}
.type-dark .switch input{opacity:0;width:0;height:0}
.type-dark input:checked+.slider{background-color:#e2e2e2}
.type-dark .slider{position:absolute;cursor:pointer;border-radius:34px;top:0;left:0;right:0;bottom:0;-webkit-transition:.2s;transition:.2s}
.type-dark .slider{background:#9f9f9f}
.type-dark .switch-title{color:#9d9d9d}
.type-dark .slider:before,.type-dark .switch:hover .slider:before{background:$(posts.background.color)}
.type-dark .slider{position:absolute;cursor:pointer;border-radius:34px;top:0;left:0;right:0;bottom:0;-webkit-transition:.2s;transition:.2s}
.type-dark .slider:before{position:absolute;content:"";border-radius:50%;height:14px;width:14px;left:0;bottom:0;-webkit-transition:.2s;transition:.2s}
.type-dark input:checked+.slider:before{background:$(main.color);-webkit-transform:translateX(24px);transform:translateX(24px)}

3. Selanjutnya letakkan code HTML Button atau HTML Switch di dalam header-wrapper atau dimanapun sobat inginkan
<div class='type-dark'>
<span class='switch-title'/>
<label class='switch'>
<input aria-label='checkbox' class='checkbox' onclick='darkMode()' type='checkbox'/>
<span class='slider'/>
</label>
</div>

Disini cara menambahkan dark mode pada blog telah berhasil, namun belum berjalan mestinya sobat harus melakukan langkah terakhir agar tampilan dark mode benar-benar berjalan. Langkah terakhir yang sobat harus lakukan yaitu menyesuaikan CSS Dark Mode pada template, karena CSS pada template yang beredar di internet tidak semuanya sama, ada yang menggunakan Class dan ada juga yang menggunakan ID. Contoh menggunakan CSS Class pada .header dan CSS ID pada #header, keduanya sama-sama menggunakan CSS namun berbeda Class.

Jadi untuk menerapkan Dark Mode ini, sobat harus memperhatikan Class atau ID masing-masing CSS yang digunakan di dalam template sobat. Perhatikan cara penerapakan CSS Dark Mode pada template berikut

Tambahkan code CSS berikut, tepat di dalam code <style> ... </style> atau <b:skin<![CDATA[ ... ]]></b:skin>
body.darkmode{background:#000;}
body.darkmode a:visited{color:#ffffff}
body.darkmode a:hover{color:#ffffff}
body.darkmode .main-wrapper{background:#000;}
body.darkmode .sidebar-wrapper{background:#000;}
...
...
... dst

Perhatikan code CSS di atas, jadi setiap kali sobat ingin merubah background atau warna teks pada element tertentu di dark mode maka sobat harus tetap menambahkan code body.darkmode di depannya, kemudian di ikuti dengan element CSS yang akan yang akan di ubah.

Demikian Cara Menambah Dark Mode Pada Blog, semoga dengan adanya tutorial di atas menambah lagi ilmu kita dalam mendesign sebuat template. Salam Blogger!!!

Hanya Blogger Pemula yang suka menulis dan membaca

Disqus Comments