UI vs. UX: What’s the difference?

Menambahkan Fitur Dark Mode Otomatis Berdasarkan Jam

Ardi Selasa, 19 Agustus 2025, 01:43

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.

UI vs. UX: What’s the difference?

Menambahkan Fitur Dark Mode Otomatis Berdasarkan Jam

Ardi Kamis, 21 Agustus 2025, 08:22

Saat ini, fitur dark mode sudah jadi hal yang lumrah di banyak website maupun aplikasi. Selain membuat tampilan lebih keren, dark mode juga membantu mata pengguna agar tidak cepat lelah, terutama saat malam hari. Nah, bagaimana kalau kita buat website bisa berubah otomatis ke dark mode sesuai jam? Jadi siang tampil terang, malam tampil gelap, tanpa harus klik tombol manual. Menarik kan?

Konsep Sederhana

Idenya sederhana:

  • Tentukan jam berapa mode gelap aktif (misalnya jam 18:00 – 06:00).
  • Gunakan JavaScript untuk mengecek waktu saat ini.
  • Jika waktu masuk rentang malam → aktifkan dark mode, kalau siang tetap light mode.

Langkah-langkah Implementasi

1. Buat Struktur HTML Sederhana




  
  
  Dark Mode Otomatis
  


  
    Selamat Datang!
    Website ini akan otomatis berubah ke dark mode sesuai jam.

2. Siapkan CSS untuk Light Mode & Dark Mode

/* style.css */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  transition: background 0.5s, color 0.5s;
}

/* Light Mode (default) */
body {
  background: #ffffff;
  color: #000000;
}

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

.container {
  padding: 20px;
  text-align: center;
}

3. Tambahkan JavaScript untuk Mengecek Jam

// script.js
function setModeByTime() {
  const now = new Date();
  const hour = now.getHours(); // ambil jam saat ini (0 - 23)

  // Tentukan jam malam: 18:00 - 06:00
  if (hour >= 18 || hour < 6) {
    document.body.classList.add("dark-mode");
  } else {
    document.body.classList.remove("dark-mode");
  }
}

// Jalankan saat halaman dimuat
setModeByTime();

Penjelasan Singkat

  • new Date().getHours() → untuk mengetahui jam sekarang.
  • if (hour >= 18 || hour < 6) → kondisi jika sekarang jam 18 ke atas atau sebelum jam 6 pagi, maka dark mode aktif.
  • document.body.classList.add("dark-mode") → menambahkan class CSS yang sudah kita siapkan.

Kesimpulan

Dengan cara ini, website kamu bisa otomatis menyesuaikan tampilan terang atau gelap sesuai jam. Simpel, tidak perlu library tambahan, dan mudah dikembangkan. Misalnya, kamu bisa tambahkan opsi manual untuk override, atau simpan preferensi pengguna di localStorage.