cara membuat dark mode atau mode gelap di blogspot / blogger

hallo semuanya selamat datang di blog baru kami, pada biasanya saya update artikel atau tutorial di situs utama saya di www.choipanwendy.com yang di mana kalian tau di situs utama saya bertema toko online, namun saya memutuskan untuk membuat situs atau blog ini untuk di pakai khusus saya mengupdate artikel atau tutorial. tentunya agar kalian para pembaca setia saya bisa lebih nyaman dan fokus dengan yang ingin kalian cari.

blog ini pun di buat pada tanggal 09 desember 2020 kemarin, untuk mengresmikannya pada postingan pertama di blog ini saya akan membagikan tutorial sederhana saja yaitu cara membuat dark mode atau mode gelap di blogspot. di sini saya menambahkan fitur Cookie agar saat kita refresh halaman yang sudah di aktifkan dengan dark mode tidak akan kembali ke mode awal meskipun kamu sudah berganti halaman

Kelebihan Memasang Dark Mode Di Blog

Seperti yang kita ketahui, saat ini sebagian besar orang menghabiskan banyak waktu untuk melihat layar perangkat digital mereka, baik itu smartphone atau pun dekstop. Dengan hadirnya dark mode ini, pengguna dapat mengistirahatkan mata yang lelah karena harus melihat layar yang terang.

Berdasarkan data yang diperoleh dari business2community.com, terlalu lama melihat layar yang terang dapat memberikan beberapa dampak seperti ketegangan mata, mata kering, pusing, dan lain-lain. jadi saya sangat mengrecomendasikan kamu untuk menambahkan fitur dark mode pada situs / blog kamu tentunya akan membuat pembaca kita nyaman juga.

Cara Membuat Dark Mode Di Blogspot Dengan LocalStorage

<div class="Switchdark">
<input class="toggledarkwendy toggledarkwendy-switch" id="darkmode" type="checkbox"/>
<label class="toggledarkwendy-btn" for="darkmode">
<svg class='svg-1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g><path d='M183.72453,170.371a10.4306,10.4306,0,0,1-.8987,3.793,11.19849,11.19849,0,0,1-5.73738,5.72881,10.43255,10.43255,0,0,1-3.77582.89138,1.99388,1.99388,0,0,0-1.52447,3.18176,10.82936,10.82936,0,1,0,15.118-15.11819A1.99364,1.99364,0,0,0,183.72453,170.371Z' transform='translate(-169.3959 -166.45548)'></path></g></svg>
<svg class='svg-2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='5'/><line x1='12' x2='12' y1='1' y2='3'/><line x1='12' x2='12' y1='21' y2='23'/><line x1='4.22' x2='5.64' y1='4.22' y2='5.64'/><line x1='18.36' x2='19.78' y1='18.36' y2='19.78'/><line x1='1' x2='3' y1='12' y2='12'/><line x1='21' x2='23' y1='12' y2='12'/><line x1='4.22' x2='5.64' y1='19.78' y2='18.36'/><line x1='18.36' x2='19.78' y1='5.64' y2='4.22'/></svg></label>
</div>

<script type="text/javascript">
//<![CDATA[
// Dark Mode
document.getElementById("darkmode").addEventListener("click", function() {
  document.body.classList.toggle("darkmode");
  localStorage.setItem("toggled", document.body.classList.contains("darkmode") ? "darkmode" : "");
});

if (localStorage.getItem("toggled") === "darkmode") {
  document.body.classList.add("darkmode");
}
//]]>
</script>

kemudian tambahkan css di bawah ini di atas kode </head>

<style type='text/css'>
/* Dark Mode */
.Switchdark{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
.toggledarkwendy{display:none;}
.toggledarkwendy-btn{display:flex;align-items:center; width:26px;height:26px;}
.toggledarkwendy-btn svg{fill:none!important;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
.toggledarkwendy-btn .svg-1{display:inline-block}
.toggledarkwendy-btn .svg-2{display:none}

.darkmode .toggledarkwendy-switch:checked + .toggledarkwendy-btn .svg-1{display:none}
.darkmode .toggledarkwendy-switch:checked + .toggledarkwendy-btn .svg-2{display:inline-block}
.darkmode .toggledarkwendy-btn svg{stroke:#fefefe}
.darkmode .toggledarkwendy-btn .svg-1{display:none}
.darkmode .toggledarkwendy-btn .svg-2{display:inline-block}
  
.darkmode .class-baru{}
.darkmode #id-baru{}
</style>

cara penlisan class baru harus di awali titik sedangkan untuk ID harus di awali #hastag, edit juga css bagian ini untuk menentukan posisi tombol dark modenya

.Switchdark{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}

jika sudah silakan klik simpan dan lihat hasilnnya, sekian cara membuat dark mode atau mode gelap di blogspot / blogger, semoga bermanfaat dan terima kasih sudah berkunjung.