Membuat Dark Mode Untuk Website Statis

Dark mode atau tampilan gelap menjadi salah satu fitur favorit di berbagai aplikasi dan website karena memberikan kenyamanan visual terutama di malam hari. Pada artikel ini, kita akan belajar cara sederhana membuat dark mode untuk website statis menggunakan HTML, CSS, dan JavaScript tanpa framework tambahan.

Mengapa Perlu Dark Mode?

Nyaman di mata: Cocok digunakan dalam kondisi cahaya rendah.
Hemat baterai: Terutama pada perangkat dengan layar OLED/AMOLED.
(AD) Inject Post
Terlihat modern: Banyak digunakan pada desain web kekinian.

Langkah-Langkah Membuat Dark Mode

1. Struktur HTML Dasar


<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Demo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="toggleMode">Toggle Dark Mode</button>
  <h1>Selamat Datang</h1>
  <p>Ini adalah contoh dark mode untuk website statis.</p>

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

2. Tambahkan Style CSS


/* style.css */
body {
  background-color: #ffffff;
  color: #000000;
  transition: background-color 0.3s, color 0.3s;
}

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

button {
  margin: 10px;
  padding: 10px;
}

3. Tambahkan JavaScript untuk Toggle


// script.js
const toggleBtn = document.getElementById('toggleMode');

toggleBtn.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');

  // Simpan preferensi ke localStorage
  if (document.body.classList.contains('dark-mode')) {
    localStorage.setItem('mode', 'dark');
  } else {
    localStorage.setItem('mode', 'light');
  }
});

// Aktifkan dark mode jika sebelumnya disimpan
window.addEventListener('load', () => {
  const mode = localStorage.getItem('mode');
  if (mode === 'dark') {
    document.body.classList.add('dark-mode');
  }
});

Hasil

Saat tombol ditekan, tampilan situs akan berganti dari mode terang ke gelap dan sebaliknya. Pengaturan ini akan disimpan di browser sehingga akan tetap aktif saat halaman dimuat kembali.

Kesimpulan

Membuat dark mode di website statis ternyata cukup mudah dengan kombinasi HTML, CSS, dan JavaScript sederhana. Fitur ini bisa menjadi nilai tambah untuk pengalaman pengguna dan memberikan kesan modern pada website kamu.