Cara Membuat Dark Mode atau Mode Gelap di WordPress

Dark Mode atau Night Mode merupakan salah satu fitur untuk memberi tampilan gelap atau malam pada sebuah situs web maupun aplikasi.

Umumnya fitur ini sangat sering sekali kita jumpai pada website maupun aplikasi media sosial, contohnya seperti Instagram, Twitter, Facebook dan masih banyak aplikasi lainnya.

Namun seiring berkembangnya teknologi yang ada, serta banyaknya programmer yang ahli dalam membuat script seperti fitur Dark Mode, dan sudah banyak digunakan pada web pribadi. Jika kalian tertarik untuk membuatnya kalian bisa simak tutorial berikut ini.

Cara Membuat Dark Mode atau Mode Gelap di WordPress Dengan Mudah:

1. Login ke akun WordPress kalian.

2. Setelah masuk ke Homepage, kalian pilih menu Plugin > Tambahkan Baru.

3. Pada kolom pencarian, kalian masukkan kata kunci "WP Night Mode"

4. Selanjutnya unduh plugin tersebut dengan klik pasang sekarang dan aktifkan. pasalnya untuk mengaktifkan plugin ini kalian harus melalui css.

5. Untuk mengaktifkannya kalian pilih menu Tampilan > Menu > Buat Menu Baru > Isi menu tersebut dan pilih Buat Menu.

6. Selanjutnya menambahkan css nya, Sebelum menambahkan css nya silahkan kalian pilih opsi layar dan centang kolom CSS Classes / Kelas CSS.

7. Selanjutnya kalian buat custom link dengan memilih menu Taut Tersuai disisi kiri halaman. Dan isi kolom URL dengan tanda # dan isi teks tautan dengan nama "DarkMode"

8. Jika sudah, selanjutnya pilih tambahkan menu maka akan muncul satu kolom baru yaitu kolom Kelas CSS, Kalian isi dengan kode dibawah ini dan simpan menu.

up-night-mode

9. Setelah semuanya sudah di atur, fitur dark mode ini tidak akan langsung berfungsi untuk menampilkan darkmode. Oleh karena itu, kalian harus sedikit mengubah warna latar belakang website nya jika tombol Dark Mode ini di klik. Caranya silahkan kalian pilih Tampilan > Sesuaikan.

10. Pergi Ke halaman Kustomisasi, selanjutnya kalian dapat merubah warna backgroud, hover link, text link dan colour link. Dan kalian sesuaikan warna nya sesuai selera. Jika sudah, pilih Terbitkan!

NB: Mengatasi Elemen Website Yang Tidak Ikut Berubah Warna

Tambahan sedikit, jika ada beberapa elemen website yang tidak berubah warna menjadi gelap, kalian bisa menambahkan kode css pada Customize > CSS Tambahan > Masukkan kode dibawah ini.

body.wp-night-mode-on .class-elemen-yang-ingin-diperbaiki {color: #kodewarna;}

Untuk mengetahui Kode Elemen nya, silahkan kalian Inspect Element terlebih dahulu. Jika sudah ditambahkan, selanjutnya kalian hanya perlu menyimpan perubahan tersebut dengan memilih tombol Terbitkan!.