Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat system dark mode di blogger secara otomatis
Info: Jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Mode dark System
Mode dark system pada website terkhusus nya di blogger merupakan fitur dark mode yang jika di aktifkan pada pengaturan browser, website yang ditampilkan akan mengaktifkan fitur dark mode secara otomatis tanpa di klik, asalkan website tersebut sudah tersedia fitur dark mode juga
Mode dark website
Seperti yang sudah admin jelaskan sebelumnya tadi bahwa mode dark system dapat bekerja alias berfungsi jika website tersebut memiliki fitur dark mode, jika tidak maka pada saat kamu memasang script untuk membuat mode dark system tersebut tidak akan berfungsi, jadi pastikan kamu telah memasang fitur dark mode di dalam website mu
Menggunakan Javascript
Nah menarik nya untuk membuat fitur dark mode system tersebut cukup menggunakan kode javascript saja, tanpa ada unsur pembuatan dari kode CSS, cara kerja nya cukup mudah, pasang dan install kode javascript yang admin berikan, maka system dark mode akan berfungsi secara otomatis
Contoh Tampilan
Untuk melihat contoh tampilan dari mode dark system tersebut silahkan aktifkan mode dark browser anda, kemudian refresh halaman artikel yang sedang kamu baca saat ini dan lihat bagaimana hasilnya
Info: Bagaimana sobat menakjubkan sekali yak
Cara pembuatan
Baiklah sekarang saatnya admin bakalan menjelaskan bagaimana caranya membuat mode dark system di blogger work 100% asalakan web ada fitur dark modenya, silahkan baca dan imuti setiap arahana yang admin jabarkan di bawah ini ok
- Pastikan kamu sudah memiliki fitur dark mode pada website mu, jika belum silahkan pelajari disini
- Selanjutnya di menu blogger silahkan pergi ke menu Tema, kemudian pilih edit HTML
- Silahkan salin kode di bawah ini kemudian letakkan di atas kode </body>
<script>/*<![CDATA[*/
/* System prefer theme by ICloudice */
const prefersDark=window.matchMedia("(prefers-color-scheme: dark)");function toggleDarkTheme(e){document.body.classList.toggle("dark-mode",e)}toggleDarkTheme(prefersDark.matches),prefersDark.addListener(e=>toggleDarkTheme(e.matches));
/*]]>*/</script>Info: Hal yang bisa kamu lakukan adalah mengubah class untuk megaktifkan mode dark yakni (dark-mode) di dalam script di atas, kemudian simpan dan lihat bagaimana hasilnya
