bQsqpPcZvKyg8Vvzo6jobl9lgcVr4zroDMLffJhS

Cara Membuat Dark Mode Otomatis di Blogger Murni CSS

Dark Mode Otomatis Blogger
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.

Manfaat Dark Mode

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

1. Masuk ke Dashboard Blogger dan klik Menu Tema.
Dark Mode Otomatis Blogger
2. Kemudian klik panah bawah sesuai pada pointer nomor 1 dan pilih opsi Edit HTML seperti pada pointer nomor 2.
Dark Mode Otomatis Blogger
3. Selanjutnya adalah menambahkan kode meta tag di bawah ini sebelum </head>.

<meta content='dark light' name='color-scheme'/>

4. Salin juga kode CSS di bawah ini sebelum </b:skin>.

@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. Nanti kalau ketemu akan muncul sepert ini:
Dark Mode Otomatis Blogger
Kalian salin semua variabel yang ada dalam selektor :root ke editor teks seperti Notepad misalnya. Value yang berada di antara kode : sampai ; hapus semua, lalu ganti menjadi value warna yang kalian inginkan seperti di bawah ini.
Dark Mode Otomatis Blogger
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.

Perlu diingat juga bahwa untuk membuat kreasi, tambahkan selector baru yang ingin diganti warnanya di bawah selector :root. Perhatikan gambar di bawah, kotak warna merah berisi variabel dari selektor :root dan yang berwarna biru adalah selector tambahan lainnya yang akan ikut diubah warnanya ketika masuk dark mode.
Dark Mode Otomatis Blogger
Sampai di sini sudah, selamat mencoba dan berkreasi. Jika ada yang masih belum dipahami, silakan tanya di kolom komentar atau kontak admin. Kalau ada waktu nanti saya akan buatkan video tutorial Dark Mode otomatis Blogger yang akan diunggah di YouTube. Terima kasih.
Related Posts
John Asto
Lebih sering online di Quora dan Pinterest dari pada media sosial lain. Penikmat konten kerajinan tradisional dari channel 李子柒 Liziqi di YouTube.

Related Posts

Posting Komentar