Dark Mode Otomatis Blogger - Dark Mode merupakan salah satu fitur pada smartphone maupun komputer yang sering digunakan oleh banyak orang saat ini. Aplikasi pada perangkat smartphone maupun desktop biasanya akan secara otomatis mendeteksi fitur Dark Mode pada sistem. Ketika Dark Mode di sistem diaktifkan, maka aplikasi juga akan beralih ke Dark Mode.
Pada umumnya template Blogger yang ada masih menyediakan tombol manual untuk mengaktifkan dan menyalakan Dark Mode. Lalu bagaimanakah cara kita menerapkan Dark Mode otomatis di template Blogger seperti pada aplikasi yang sering kita gunakan? Dalam artikel ini saya akan menunjukkan bagaimana caranya membuat Dark Mode otomatis pada template Blogger.
Perlu dicatat bahwa kita tidak memerlukan kode JavaScript yang akan memperlambat loading dan membuat blog semakin berat. Jadi saya akan benar-benar hanya menggunakan kode CSS murni untuk bisa membuat Dark Mode otomatis.
Apa Manfaat Dark Mode Pada Blog
Dark Mode akan membantu pengunjung blog untuk membaca teks dengan baik dan nyaman di malam hari atau di tempat yang gelap. Ini bertujuan untuk mengurangi beban mata yang berlebihan terhadap cahaya. Efeknya akan membuat pengunjung blog lebih nyaman saat membaca teks yang ada di blog kita.
Namun beberapa orang lebih menyukai mode terang daripada Dark Mode saat membaca teks. Maka dari itu saya menerapkan fitur Dark Mode otomatis yang akan menyesuaikan sistem smartphone dan desktop secara otomatis. Karena murni CSS, saya akan menggunakan meta tag sederhana agar browser bisa mengenal instruksi Dark Mode dari perangkat yang digunakan oleh pengunjung blog.
Cara Membuat Dark Mode Otomatis
Berikut adalah caranya :
1. Buka Akun Blogger.
2. Pilih Thema Edit HTML.
3. Car Kode </head>
Salin kode berikut , dan pastekan diatasnya
ini code nya gaes..
<meta content='dark light' name='color-scheme'/>
Selanjutnya , cari kode </b:skin>
Taruh kode ini diatasnya
ini code nya gaes..
@media (prefers-color-scheme: dark){
:root {
/* Isi sesuai dengan CSS template yang digunakan*/
}
}
Bagaimana cara mengisi selector :root{} ini? Sebelumnya jangan keluar dulu dari Edit HTML, kalau sudah terlanjur silakan masuk lagi. Dalam Edit HTML tekan Ctrl + F dan masukkan kata kunci :root.
Tidak semua template menerapkan Custom Variables yang dimana nantinya akan memakai selektor :root. Jika di template kalian tidak menemukan selektor :root, maka kalian bisa membuatnya sendiri dengan bantuan dari Inspect Element.
Contoh Gambar Menu Dark Mode
Post a Comment