Cara Membuat Dark Mode Otomatis di Blogger Murni CSS
John Asto
Update:
... menit baca
Dengarkan
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.
2. Kemudian klik panah bawah sesuai pada pointer nomor 1 dan pilih opsi Edit HTML seperti pada pointer nomor 2.
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:
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.
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.
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.
SEO enthusiast, front-end developer dan pembaca manga Junji Ito.
Related Posts
3 komentar
Kebijakan berkomentar: 1. Meninggalkan komentar sebagai anonim tidak dibolehkan di blog ini. 2. Dilarang memasang link aktif dalam komentar. 3. Berkomentar sesuai topik.
Kita menggunakan fitur Inspect Element pada browser untuk mengetahui kode HTML penyusun blog. Dalam ribuan baris kode HTML ada atribut class dan id yang isinya adalah selector CSS.
Selector CSS ini lah yang akan kita masukkan ke dalam root{}. Selector CSS menampung banyak property seperti warna teks, warna background, lebar, tingggi, dan masih banyak lagi.
Contohnya kita mau ganti warna Header blog agar bisa warna hitam saat dark mode. Pertama-tama kita harus mengetahui selector apa yang digunakan oleh Header blog. Cara mengetahuinya adalah dengan menjalankan fitur Inspect Element pada browser. Arahkan kursor pada header blog dan akan muncul selector mana yang digunakan.
Kita asumsikan selector dari Header blog adalah head dengan jenis id (#head). Ketika sudah dapat, ketik #head {background-color: black} ke dalam root{}. Maka hasilnya akan seperti ini: :root{ #head {background-color: black} }
Kalau pakai template Igniplex saya bisa kasih source dark mode otomatisnya. Karena sebenarnya dark mode otomatis sudah saya terapkan di blog ini dengan template Igniplex.
Catatan: Edit template blog secara manual sangat disarankan untuk mengetahui dasar-dasar HTML dan CSS agar tidak kesulitan.
3 komentar
Kita menggunakan fitur Inspect Element pada browser untuk mengetahui kode HTML penyusun blog. Dalam ribuan baris kode HTML ada atribut class dan id yang isinya adalah selector CSS.
Selector CSS ini lah yang akan kita masukkan ke dalam root{}. Selector CSS menampung banyak property seperti warna teks, warna background, lebar, tingggi, dan masih banyak lagi.
Contohnya kita mau ganti warna Header blog agar bisa warna hitam saat dark mode. Pertama-tama kita harus mengetahui selector apa yang digunakan oleh Header blog. Cara mengetahuinya adalah dengan menjalankan fitur Inspect Element pada browser. Arahkan kursor pada header blog dan akan muncul selector mana yang digunakan.
Kita asumsikan selector dari Header blog adalah head dengan jenis id (#head).
Ketika sudah dapat, ketik #head {background-color: black} ke dalam root{}. Maka hasilnya akan seperti ini:
:root{
#head {background-color: black}
}
Kalau pakai template Igniplex saya bisa kasih source dark mode otomatisnya. Karena sebenarnya dark mode otomatis sudah saya terapkan di blog ini dengan template Igniplex.
Catatan:
Edit template blog secara manual sangat disarankan untuk mengetahui dasar-dasar HTML dan CSS agar tidak kesulitan.