Cara Praktis Membuat Dark Mode Otomatis di Situs Web Modern

Dark mode kini menjadi fitur yang sangat populer dalam pengembangan antarmuka pengguna. Dengan mengaktifkan fitur ini, tampilan aplikasi atau website akan beralih ke latar gelap secara otomatis, tergantung preferensi pengguna atau waktu perangkat.

Artikel ini membahas pengertian, manfaat, cara implementasi dark mode otomatis, serta penutup sebagai rangkuman.

Pengertian Fitur Dark Mode Otomatis

Dark mode otomatis adalah fitur yang memungkinkan tampilan aplikasi atau website beralih ke mode gelap secara otomatis berdasarkan pengaturan sistem pengguna atau waktu tertentu.

Fitur ini memanfaatkan media query CSS (prefers-color-scheme) atau skrip waktu untuk menyesuaikan antarmuka secara dinamis.

Dark mode tidak hanya menjadi tren visual, tetapi juga mendukung kenyamanan pengguna, terutama saat menggunakan perangkat dalam kondisi cahaya redup.

Baca Juga: Sertifikasi Web Developer

Manfaat Fitur Dark Mode Otomatis

Pahami beberapa manfaat Fitur Dark Mode Otomatis:

1. Ramah Mata: Mengurangi ketegangan mata saat penggunaan malam hari atau dalam kondisi minim cahaya.
2. Efisiensi Energi: Pada perangkat dengan layar OLED, dark mode membantu menghemat daya baterai.
3. Pengalaman Pengguna Lebih Baik: Memberikan opsi tampilan yang sesuai preferensi pengguna.
4. Modern dan Profesional: Tampilan dark mode meningkatkan kesan estetika dan teknologi mutakhir.
5. Meningkatkan Aksesibilitas: Memudahkan pengguna dengan sensitivitas cahaya untuk tetap nyaman menggunakan aplikasi atau situs web.

Cara Membuat Fitur Dark Mode Otomatis

Simak langkah-langkah dalam membuat Fitur Dark Mode Otomati dibawah ini sebagai berikut:

1. Gunakan Media Query CSS

Untuk menyesuaikan mode berdasarkan sistem perangkat:

body {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: white;
  }
}

2. Gunakan JavaScript Berdasarkan Waktu (Opsional)

Jika ingin menerapkan dark mode otomatis berdasarkan waktu pengguna:

const now = new Date();
const hour = now.getHours();

if (hour >= 18 || hour < 6) {
  document.body.classList.add('dark-mode');
}

Lalu, buat CSS untuk class .dark-mode:

.dark-mode {
  background-color: #121212;
  color: white;
}

3. Tambahkan Tombol Manual (Opsional)

Untuk fleksibilitas, Anda bisa menyediakan toggle manual agar pengguna bisa memilih:

<button onclick="toggleMode()">Toggle Dark Mode</button>

function toggleMode() {
  document.body.classList.toggle('dark-mode');
}

Penutup

Menerapkan fitur dark mode otomatis tidak hanya meningkatkan estetika, tetapi juga kenyamanan pengguna. Dengan memanfaatkan CSS media query atau JavaScript sederhana, Anda dapat memberikan pengalaman pengguna yang lebih baik dan fleksibel. Fitur ini kini menjadi standar baru dalam desain modern, dan dapat dengan mudah diintegrasikan ke dalam proyek web atau aplikasi Anda.