Menambahkan Fitur Dark Mode Otomatis Berdasarkan Jam

Kadang kita malas mengganti tema website secara manual, apalagi saat malam hari cahaya terang bisa bikin mata cepat lelah. Nah, salah satu solusi yang bisa kita terapkan adalah fitur dark mode otomatis. Dengan fitur ini, tampilan website akan berubah sesuai dengan jam yang kita tentukan. Misalnya, mode terang di siang hari dan otomatis berubah jadi mode gelap saat malam.

1. Membuat Struktur Dasar HTML

Kita mulai dengan membuat file index.html sederhana sebagai wadah percobaan.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Otomatis</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Selamat Datang di Website Saya</h1>
  <p>Website ini punya fitur dark mode otomatis berdasarkan jam!</p>
  <script src="script.js"></script>
</body>
</html>

2. Membuat CSS untuk Mode Terang dan Mode Gelap

Selanjutnya, kita buat file style.css untuk mengatur tampilan tema terang dan gelap.

/* Mode terang (default) */
body {
  background-color: white;
  color: black;
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 50px;
}

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

Di sini, kita menggunakan class .dark-mode untuk mengaktifkan tema gelap.

3. Menambahkan JavaScript untuk Deteksi Jam

Sekarang waktunya bikin script agar website otomatis mengganti mode sesuai jam. Buat file script.js:

// Ambil jam saat ini
const jamSekarang = new Date().getHours();

// Tentukan rentang waktu untuk dark mode (misalnya 18.00 - 06.00)
if (jamSekarang >= 18 || jamSekarang < 6) {
  document.body.classList.add("dark-mode");
} else {
  document.body.classList.remove("dark-mode");
}

Penjelasan singkat:

new Date().getHours() mengambil jam sekarang (0–23).
Jika jam 18.00 ke atas atau kurang dari jam 6 pagi, maka dark mode aktif.
Kalau selain itu, mode terang tetap digunakan.

4. Uji Coba

Ubah jam di komputer/laptop kamu untuk melihat perbedaannya.
Atau, ganti kondisi waktu di kode if untuk mengetes manual.

5. Bonus: Tambahkan Transisi Halus

Supaya perpindahan mode lebih enak dilihat, kita bisa menambahkan animasi transisi di CSS:

body {
  transition: background-color 0.5s ease, color 0.5s ease;
}

Kesimpulan

Dengan beberapa baris kode sederhana, kita sudah bisa membuat fitur dark mode otomatis berdasarkan jam. Cara ini ramah untuk pemula karena cukup menggunakan HTML, CSS, dan JavaScript dasar. Selain membuat website lebih nyaman, fitur ini juga bikin tampilan jadi lebih modern.