Belakangan ini, opsi dark mode banyak tersedia di aplikasi-aplikasi mobile maupun situs web. Ini adalah mode tambahan untuk menampilkan user interface yang gelap di layar. Desain ini sengaja dibuat untuk mengurangi pancaran cahaya, namun tetap mempertahankan kontras warna agar teks mudah dibaca.
Dark mode biasanya digunakan pada malam hari atau ketika berada di lingkungan yang gelap. Selain menghemat daya, mode ini konon dapat membuat mata lebih nyaman karena mengurangi flickering dan blue light. Bagi pemilik situs web, bagaimana mungkin fungsionalitas tersebut tidak membuat tertarik untuk memasangnya?
Cara Mengaktifkan Dark Mode untuk Pengunjung Web
Sampai detik ini belum ada opsi dark mode secara default yang tersedia untuk platform WordPress. Tetapi, itu bisa diakali dengan menggunakan plugin pihak ketiga bernama WP Night Mode. Plugin gratis ini memiliki fitur mengaktifkan dan mematikan dark mode sesuai keinginan. Berikut tutorial pemasangannya.
1. Unduh Plugin WP Night Mode
Cari plugin dengan keyword WP Night Mode di menu ‘Tambah Baru Plugin’. Klik ‘Pasang Sekarang’, lalu setelah pemasangan selesai klik ‘Aktifkan’.
Setelah aktif, Anda memang tidak akan melihat apapun di menu ‘Pengaturan’, sebab tombolnya hanya bisa dimunculkan dengan menambahkan CSS.
2. Pasang Tombol Dark Mode
Berikutnya, sorot ‘Tampilan’ kemudian masuk ke opsi ‘Menu’. Tombolnya harus disematkan di menu, jadi pastikan Anda sudah menyiapkan tempatnya. Misalnya akan diletakkan di sisi paling kanan menu utama atau di top menu.
Klik ‘Membuat Menu Baru’, kemudian beri nama “Dark Mode†atau “Night Modeâ€, setelah itu klik ‘Buat Menu’.
Sebelum menambahkan CSS untuk memunculkan tombol, jangan lupa aktifkan ‘CSS Classes’ di ‘Opsi Layar’.
Setelah itu tambahkan ‘Custom Link’ dan masukkan tanda pagar (#)di dalam kolom URL. Sementara kolom ‘Teks Tautan’ bisa Anda isi dengan “Dark Mode†atau “Night Mode†seperti tadi.
Jangan lupa pilih tempat di mana tombol ini dapat dilihat oleh pengunjung. Misalnya, ingin diletakkan di top menu, maka centang ‘Top Menu’, lalu klik ‘Simpan Menu’.
3. Pengaturan Dark Mode
Sekarang mari kita lihat ke halaman utama situs web, apakah tombol Dark Mode sudah muncul atau belum. Jika sudah, sekarang saatnya untuk mengaturnya. Sebab, WP Night Mode ini tidak secara otomatis menambah warna gelap ke UI situs web Anda begitu tombol diaktifkan.
Anda harus mengatur sendiri warna gelap untuk latar belakang dan warna yang lebih terang untuk teks dan tautan. Sekarang Anda berada di halaman utama, klik ‘Sesuaikan’ atau ‘Customize’ dari admin bar.
Menu ‘Costumize’ akan muncul di sebelah kiri layar. Scroll ke menu paling bawah dan Anda akan menemukan pengaturan untuk Night Mode.
Pada kotak pengaturan tersebut, Anda bisa mengganti warna latar belakang, teks, link, dan link hover. Untuk teks disarankan menggunakan warna putih (#ffffff). Sedangkan untuk latar belakang jangan menggunakan warna hitam pekat (#000000), tetapi lebih condong ke abu-abu (#252525). Lalu warna link dan link hover sebaiknya disesuaikan dengan tema situs web Anda.
Setelah selesai dengan pengaturan warna, klik ‘Terbitkan’ dan lihat lagi apakah sudah ada efeknya apabila tombol Dark Mode diaktifkan.
Mengatasi Elemen yang Tidak Ikut Berubah Warna
Sayangnya, plugin gratis ini tidak menawarkan hasil yang 100 persen sempurna. Anda masih harus melakukan pengaturan secara manual apabila ada elemen yang tidak berubah warna. Contohnya ada judul posting yang tidak ikut berubah warna menjadi putih, maka yang harus dilakukan adalah menambahkan CSS.
Masuk lagi ke ‘Costumize’, lalu buka pengaturan ‘CSS Tambahan’. Pastikan kamu sudah mendapatkan class dari elemen yang ingin diperbaiki. Caranya mudah, cukup gunakan fitur Inspect Element Code (Ctrl+Shift+I) di browser. Setelah itu tuliskan kode di bawah ini di kolom ‘CSS tambahan’:
body.wp-night-mode-on .class-elemen-yang-ingin-diperbaiki {
color: #kodewarna;
}
Perhatikan contoh di tangkapan layar berikut ini:
Jika sudah selesai mengubah warna secara manual, sekarang klik ‘Terbitkan’ dan lihat hasilnya sekali lagi dengan Dark Mode diaktifkan.
Penutup
Dark Mode dapat menjadi nilai plus untuk situs web Anda karena menambah pengalaman pengunjung. Plugin WP Night Mode sendiri sangat membantu untuk pengguna WordPress. Selain sepenuhnya gratis, plugin juga berbentuk tombol alih-alih teks, yang bisa diaktifkan dan dimatikan serta menyimpan cache kunjungan terakhir.
Jika Anda mengalami kesulitan dalam mengikuti tutorial di atas, jangan ragu bertanya dan diskusikan di kolom komentar. Selamat mencoba!
