Menambahkan Fitur Dark Mode pada Sistem Absensi Web

September 3, 2025
oleh Edusoft Center

DAFTAR ISI

1. Pendahuluan

Di era sekarang, tampilan aplikasi bukan hanya soal fungsi, tetapi juga soal kenyamanan pengguna. Salah satu fitur visual yang semakin populer adalah dark mode. Hampir semua aplikasi besar seperti WhatsApp, YouTube, hingga sistem operasi Windows dan Android menyediakan mode gelap.

Namun, kalau kita lihat sistem absensi berbasis web sederhana, kebanyakan masih tampil dengan background putih polos. Bagi sebagian orang, tampilan terang memang nyaman, tetapi ada juga pengguna yang lebih suka tampilan gelap. Dengan menambahkan fitur dark mode, aplikasi absensi tidak hanya terlihat modern, tetapi juga memberi kebebasan kepada pengguna untuk memilih tampilan sesuai selera.

Artikel ini akan membahas secara lengkap cara menambahkan fitur dark mode pada sistem absensi berbasis web menggunakan HTML, CSS, dan JavaScript.

2. Apa Itu Dark Mode?

Dark mode adalah tampilan antarmuka yang didesain dengan latar belakang gelap (hitam/abu tua) dan teks berwarna terang. Kebalikan dari light mode yang menggunakan latar putih dengan teks hitam.
Contoh:

Light Mode: latar putih, teks hitam
Dark Mode: latar hitam, teks putih

3. Kenapa Dark Mode Penting di Aplikasi Absensi Web?

Ada beberapa alasan kenapa dark mode patut ditambahkan pada sistem absensi:

Mengurangi kelelahan mata: tampilan gelap lebih nyaman terutama di malam hari.
Lebih hemat energi: pada layar OLED/AMOLED, piksel hitam tidak memakan daya.
Kesan modern: aplikasi terlihat lebih up-to-date.
Personalisasi pengguna: memberi pilihan sesuai preferensi masing-masing

4. Persiapan Project

Sebelum mulai, pastikan kamu sudah menyiapkan:

Code editor: Visual Studio Code / Sublime / Notepad++
Browser: Chrome/Firefox/Edge untuk uji coba
File project: cukup buat folder baru darkmode-absensi dengan file index.html dan style.css

5. Membuat Struktur Dasar HTML untuk Halaman Absensi

Buat file index.html dengan struktur kode sebagai contoh :

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sistem Absensi dengan Dark Mode</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Sistem Absensi Web</h1>
    <button id="darkModeToggle">🌙 Dark Mode</button>
  </header>

  <main>
    <form>
      <label>Nama:</label><br>
      <input type="text" name="nama"><br><br>
      <label>Status:</label><br>
      <select name="status">
        <option value="Hadir">Hadir</option>
        <option value="Izin">Izin</option>
        <option value="Alpha">Alpha</option>
      </select><br><br>
      <button type="submit">Kirim Presensi</button>
    </form>
  </main>

  <script src="script.js"></script>
</body>
</html>

Di bagian <header>, sudah ada tombol / button :

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

Tombol ini akan dipakai untuk mengaktifkan/menonaktifkan mode gelap.

7. Membuat Style CSS untuk Dark & Light Mode

Buat file style.css:

/* Light Mode (default) */
body {
  background: #ffffff;
  color: #000000;
  font-family: Arial, sans-serif;
  transition: all 0.3s ease;
}

/* Dark Mode */
body.dark-mode {
  background: #121212;
  color: #ffffff;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f4f4f4;
}

body.dark-mode header {
  background: #1e1e1e;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

CSS sudah ditambahkan transition: all 0.3s ease; pada body.
Efek ini membuat perubahan warna lebih smooth, tidak langsung berubah mendadak.

9. Menyimpan Preferensi User dengan LocalStorage

Buat file script.js:

const toggle = document.getElementById("darkModeToggle");

// Cek preferensi sebelumnya
if (localStorage.getItem("darkMode") === "enabled") {
  document.body.classList.add("dark-mode");
  toggle.textContent = "☀️ Light Mode";
}

// Event klik tombol
toggle.addEventListener("click", () => {
  document.body.classList.toggle("dark-mode");

  if (document.body.classList.contains("dark-mode")) {
    localStorage.setItem("darkMode", "enabled");
    toggle.textContent = "☀️ Light Mode";
  } else {
    localStorage.setItem("darkMode", "disabled");
    toggle.textContent = "🌙 Dark Mode";
  }
});

10. Uji Coba Dark Mode di Browser

Buka index.html di browser.
Klik tombol 🌙 Dark Mode → background berubah menjadi gelap.
Klik lagi ☀️ Light Mode → kembali terang.
Refresh halaman → sistem tetap mengingat mode terakhir.

11. Pengembangan Opsional: Dark Mode Otomatis Berdasarkan Waktu

Tambahkan script ini agar mode otomatis berubah sesuai jam:

const hour = new Date().getHours();
if (hour >= 18 || hour < 6) {
  document.body.classList.add("dark-mode");
}

Dengan ini, mode gelap otomatis aktif pada malam hari.

12. Tips Tambahan untuk Desain Dark Mode yang Nyaman

Gunakan abu gelap (#121212) bukan hitam pekat (#000000) agar mata lebih nyaman.
Gunakan warna aksen (biru, hijau) untuk tombol agar tetap terlihat jelas.
Pastikan kontras teks tinggi (misalnya putih di atas abu gelap).

Kalian Juga bisa mengembangkan atau menyesuaikan kode untuk dark/light mode button ini ke dalam projek kalian.

Sebagai contoh, implementasi kode Dark/Light button untuk dashboard absensi :

13. Kesalahan Umum Saat Membuat Dark Mode

Tidak menambahkan transisi, sehingga perubahan terasa kasar.
Lupa menyimpan preferensi user → setiap refresh kembali ke default.
Warna teks dan background kurang kontras → sulit dibaca.

14. Kesimpulan

Menambahkan fitur dark mode pada sistem absensi web adalah langkah kecil tapi berdampak besar.
Selain membuat aplikasi lebih nyaman digunakan, dark mode juga memberi kesan modern dan profesional.

Dengan HTML, CSS, dan JavaScript sederhana, kita bisa:

Membuat toggle mode gelap/terang
Menambahkan efek transisi
Menyimpan preferensi user dengan LocalStorage
Bahkan mengatur mode otomatis berdasarkan waktu

👉 Fitur ini ringan, mudah, dan bisa langsung dipasang di project absensi yang sudah ada.