Mode aplikasi yang berjalan pada sebuah sistem operasi bisa diatur menjadi "light" atau "dark". Salah satunya yaitu Windows 10 yang juga mempunyai fitur canggih seperti ini. Gambarannya; jika pengaturan pada sistem operasi ini menetapkan dark mode sebagai mode default. Maka semua aplikasi yang mendukung kemampuan tersebut akan berubah secara otomatis menjadi "dark".
Google Chrome termasuk yang mendukung kemampuan tersebut sebagaimana halnya browser modern lainnya yang dikenal saat ini. Namun sayang kemampuan tersebut tidak dibarengi dengan fitur yang dimiliki oleh seluruh website maupun blog pribadi. Kecuali sang pemilik website menambahkan baris kode dark mode otomatis pada template blog mereka.
Sehingga tidak heran ketika pengaturan mode dark aplikasi sudah ditentukan oleh sistem operasi. Namun ketika mengakses website tertentu seolah-olah fungsi tersebut tidak berjalan. Dengan kata lain, fitur dark mode hanya menyelimuti kerangka browser. Adapun bagian dalam sebuah website seperti halnya header; sidebar, footer dan lainnya tidak termasuk.
Lantas bagaimana cara pemilik website agar memiliki template yang otomatis dark mode mengikuti setelan sistem operasi pengunjung? Berikut ini tutorial selengkapnya tentang cara otomatis mengaktifkan dark mode sesuai pengaturan sistem operasi. Dan seperti biasa kali ini masih tetap menggunakan Bootstrap yang disisipkan kedalam Blogspot.
Cara Bootstrap Otomatis Mengaktifkan Dark Mode Sesuai Setelan OS
Cara membuat template blogger sendiri kali ini menginjak masalah dark mode kembali. Tapi jangan salah, bahasan ini berbeda dengan dark mode yang kemarin kita kupas. Sisi perbedaannya, fungsi dark mode pada sebuah website ditentukan oleh pengaturan yang ada pada sistem operasi. Jika mode defaultnya adalah dark mode maka website menjadi dark. Sebaliknya, jika setelan mode aplikasi pada sebuah OS adalah light. Maka tampilan sebuah website juga mengikuti setelan tersebut menjadi light.
Berikut ini tutorial selengkapnya tentang cara otomatis mengaktifkan dark mode pada website sesuai dengan pengaturan dalam sistem operasi.
1. Login ke dashboard Blogger.
2. Klik Tema, klik icon ▼ di sebelah tulisan SESUAIKAN kemudian klik Edit HTML.
3. Pastikan meta tags pada template blogspot sudah disertai dengan baris kode berikut yang diletakan setelah tag <head> dan sebelum tag penutup </head>.
4. Tambahkan baris kode meta tags berikut di bawahnya.
5. Letakan baris kode untuk memanggil Bootstrap-Dark Variant CSS berikut ini dibawahnya.
6. Jika sebelumnya menggunakan template blogger dari bahasan kemarin. Baris kode dibawah ini sudah ada didalamnya. Teman-teman bisa menghapus dan menggantikan baris kode di bawah ini dengan kode nomor 5 di atas. Alternatif lainnya biarkan dan tidak usah dihapus karena fungsi dark mode tetap bisa berjalan sebagaimana mestinya.
7. Letakan baris kode berikut sebelum tag penutup </body>.
8. Tepatnya setelah baris kode berikut (jika menggunakan contoh template buatan sendiri dari nol pada bahasan di blog ini).
9. Simpan template.
10. Silahkan tes dengan cara masuk ke pengaturan Windows dan aktifkan dark mode untuk aplikasi.
11. Caranya silahkan buka Start > Settings > Personalization > Colors >.
12. Perhatikan pada bagian "Choose your default app".
13. Silahkan rubah dari "Light" menjadi "Dark".
14. Maka ketika pengaturan pada sistem operasi "Light" otomatis website akan terlihat seperti ini.
15. Sebaliknya, jika pengaturan pada sistem operasi pengunjung blog adalah "Dark Mode". Maka secara otomatis tampilan website yang terlihat akan seperti berikut.
16. Selesai.
Kesimpulan
Dark Mode pada template blogger yang kita buat sendiri dari nol ini sangat berbeda. Karena fungsi mode gelap yang dihasilkan benar-benar otomatis mengikuti pengaturan dari OS. Namun sayangnya sejauh ini belum berhasil memunculkan tombol fungsi dark mode pada website. Ada yang bisa kasih solusi? Silahkan buat artikel lanjutan yang bisa menyempurnakan bahasan ini ya.
Sekian belajar otodidak kita hari ini tentang cara membuat template blogger sendiri. Kali ini tentang cara otomatis mengaktifkan dark mode dengan bootstrap sesuai pengaturan sistem operasi.
Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar