Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat fitur dark mode otomatis di blogger
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 bawaan HP jika Pengaturan HP kalian menggunakan mode dark maka secara otomatis tampilan website juga menggunakan mode dark, asalkan website tersebut sudah tersedia fitur dark mode juga
Mode dark website
Seperti yang sudah admin jelaskan sebelumnya, bahwa mode dark system dapat bekerja alias berfungsi jika website tersebut memiliki fitur dark mode, jika website tidak memiliki fitur dark mode maka pada saat kamu memasang script untuk membuat mode dark system otomatis 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 atau mengaktifkan mode dark oada setelan HP 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.com */
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 mode dark sesuai Template yang kamu gunakan untuk megaktifkan mode dark yakni (dark-mode) di dalam script di atas, misal class yang di gunakan adalah drK, darK atau sebagainya, kemudian simpan dan lihat bagaimana hasilnya