Plus UI punya beberapa pilihan tampilan tema, termasuk Dark Mode. Fitur ini memang sudah menjadi hal yang lazim di banyak situs: Google, Twitter, dan Facebook pun menyediakan mode gelap. Bagi sebagian pengguna, tampilan gelap terasa lebih nyaman karena layar tidak terlalu terang.
Masalahnya, pada Plus UI, Dark Mode biasanya baru aktif setelah pengunjung menekan tombolnya sendiri. Jika kamu ingin blog langsung tampil dalam mode gelap sejak kunjungan pertama, ada cara sederhana untuk mengaturnya.
Menjadikan Dark Mode Sebagai Tema Default
Tujuan pengaturan ini jelas: saat seseorang membuka blog kamu untuk pertama kali, tema yang muncul otomatis adalah Dark Mode. Pengunjung tidak perlu lagi mencari atau menekan tombol pergantian tema.
Yang perlu diingat, tombol untuk kembali ke mode terang tetap berfungsi. Jadi, pengaturan ini tidak mengunci pengunjung pada Dark Mode; mereka masih bisa memilih tampilan yang lebih nyaman bagi mereka.
Langkah Pertama: Tambahkan Class Dark Mode
Salin kode berikut:
<b:class name='drK'/>Lalu cari bagian ini di template Plus UI kamu:
<b:attr name='id' value='mainCont'/>Letakkan kode <b:class name='drK'/> tepat di bawah baris tersebut.
Class drK inilah yang dipakai Plus UI untuk menandai bahwa halaman berada
dalam Dark Mode. Dengan menambahkannya langsung ke elemen mainCont, tema gelap
akan aktif sebagai tampilan awal.
Langkah Kedua: Tambahkan JavaScript
Setelah itu, tambahkan kode JavaScript berikut pada template Plus UI kamu:
<script>
/*<![CDATA[*/
/* Dark Mode Default */ document.querySelector('#mainCont').classList.remove('drK') : document.querySelector('#mainCont').classList.add('drK')
/*]]>*/
</script>
Kode ini bekerja bersama pengaturan class drK yang sudah ditambahkan
sebelumnya, sehingga Dark Mode dapat berjalan sebagai tema default pada
template.
Uji Hasilnya
Setelah kedua kode dipasang, hapus Cookie pada blog kamu, lalu refresh halaman. Jika pemasangannya benar, blog akan langsung terbuka dalam Dark Mode tanpa perlu menekan tombol dark mode.
Tombol mode light tetap tersedia. Artinya, pengunjung yang lebih suka tampilan terang masih bisa beralih kembali seperti biasa.
Kesimpulan
Mengaktifkan Dark Mode secara default di Plus UI pada dasarnya hanya soal
memindahkan tema gelap dari pilihan opsional menjadi tampilan awal. Class drK
dan JavaScript yang ditambahkan membuat blog langsung terbuka dalam mode gelap
saat pengunjung datang pertama kali.
Yang penting, pengaturan ini tetap memberi kebebasan kepada pembaca. Mereka yang ingin tampilan terang masih dapat menggunakan tombol mode light, sehingga blog tetap fleksibel tanpa mengubah preferensi pengunjung.
