Memasang Fitur Dark Mode Pada Template Blogger

 Webku.eu.org – Fitur dark mode adalah tampilan yang menggantikan latar belakang putih atau cerah pada website atau aplikasi dengan latar belakang yang gelap atau hitam. Pada dasarnya, fitur ini menggunakan warna yang lebih gelap untuk mengurangi kecerahan layar dan membuat pengalaman baca menjadi lebih nyaman, terutama saat digunakan dalam kondisi cahaya yang rendah.

Cara Membuat Fitur Dark Mode

Silahkan buka Blogspot > Tema > edit HTML tambahkan kode di bawah ini di atas kode </body>

<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>

Setelah itu tambahkan kode 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>

Untuk mengedit posisi dari tombol dark mode, silahkan edit kode yang mirip dengan kode dibawah ini

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

Simpan dan lihat hasilnya.

Oke mungkin segitu saja yang dapat Saya sampaikan dan semoga tips ini dapat di gunakan di dalam blog Anda agar lebih menarik.