Ini Dia Cara Menambahkan Fitur Dark Mode di Situs WordPress

[Show]

Dark Mode kini menjadi fitur populer yang disukai banyak pengguna karena memberikan kenyamanan saat menjelajah situs dalam kondisi cahaya redup, sekaligus menghemat daya baterai untuk perangkat dengan layar OLED.

Jika Anda memiliki situs WordPress dan ingin memberikan pengalaman browsing yang lebih nyaman dan modern, fitur dark mode adalah salah satu tambahan yang layak dipertimbangkan.

Dalam artikel ini, kita akan membahas cara menambahkan dark mode ke situs WordPress Anda, baik menggunakan plugin maupun tanpa plugin, serta tips agar tampilannya tetap ringan dan SEO friendly.

Berikut artikel panjang yang dapat langsung diposting di blog Anda, berjudul “Ini Dia Cara Menambahkan Fitur Dark Mode di Situs WordPress”,

Mengapa Dark Mode Penting?

Dark mode tidak hanya tentang estetika. Berikut beberapa alasan mengapa dark mode sangat bermanfaat:

Mengurangi ketegangan mata, terutama pada malam hari.
Membuat konten lebih fokus karena latar gelap dan teks terang.
Efisiensi baterai pada perangkat mobile dengan layar AMOLED/OLED.
Memberikan kesan modern dan profesional pada tampilan situs Anda.

Cara Menambahkan Dark Mode di WordPress

Ada dua pendekatan utama untuk menambahkan dark mode:

1. Menggunakan Plugin WordPress

Cara paling mudah dan cepat adalah dengan menggunakan plugin. Berikut langkah-langkahnya:

a. Install Plugin

Beberapa plugin dark mode populer:

WP Dark Mode
Droit Dark Mode
Darklup Lite

Masuk ke Dashboard WordPress > Plugin > Tambah Baru, lalu cari dan instal plugin pilihan Anda.

b. Konfigurasi Plugin

Setelah aktif, masuk ke pengaturan plugin. Umumnya Anda bisa mengatur:

Tombol toggle dark mode di bagian atas atau bawah halaman
Mode otomatis mengikuti sistem perangkat pengguna
Penyesuaian warna dan animasi transisi

🖼️ [Ilustrasi Gambar 1: Tampilan pengaturan plugin dark mode di dashboard WordPress]

2. Tanpa Plugin (Manual dengan CSS & JavaScript)

Untuk Anda yang ingin solusi lebih ringan tanpa plugin tambahan, bisa menambahkan dark mode secara manual.

a. Tambahkan Toggle Button

Edit file header.php atau gunakan widget HTML untuk menambahkan tombol berikut:

<button id="darkModeToggle">🌙 Dark Mode</button>

b. Tambahkan Script JavaScript

Tambahkan ini ke footer (footer.php) atau ke file JavaScript Anda:

<script>
  const toggle = document.getElementById("darkModeToggle");
  toggle.addEventListener("click", () => {
    document.body.classList.toggle("dark-mode");
    localStorage.setItem("darkMode", document.body.classList.contains("dark-mode"));
  });

  if (localStorage.getItem("darkMode") === "true") {
    document.body.classList.add("dark-mode");
  }
</script>

c. Tambahkan CSS Dark Mode

Tambahkan ke style.css:

.dark-mode {
  background-color: #121212;
  color: #ffffff;
}
.dark-mode a {
  color: #90caf9;
}

🖼️ [Ilustrasi Gambar 2: Contoh tampilan halaman WordPress dengan dark mode aktif]

Tips Tambahan

Gunakan warna kontras yang cukup agar teks tetap terbaca di mode gelap.
Jangan hanya mengubah latar dan teks. Pastikan elemen seperti tombol, form, dan gambar juga selaras dengan dark mode.
Selalu uji tampilan di berbagai perangkat dan browser.

Kesimpulan

Menambahkan dark mode di situs WordPress kini mudah dan bermanfaat. Baik dengan plugin maupun secara manual, fitur ini akan memberikan nilai tambah pada situs Anda dari sisi kenyamanan pengguna dan tampilan visual.

Jangan ragu untuk mulai bereksperimen dan memberikan pengunjung pilihan tampilan yang sesuai dengan preferensi mereka.