Part 8: Cara Menambahkan Mode Gelap (Dark Mode) pada Web Undangan Pernikahan Online
Pada Part 7, kita sudah menambahkan galeri foto dan buku tamu agar undangan terlihat lebih interaktif. Nah, di Part 8 ini kita akan membuat fitur mode gelap (dark mode) agar undangan terlihat modern dan nyaman di mata, terutama saat dibuka di malam hari.
Apa yang Akan Dibuat?
Kita akan menambahkan:
- Tombol toggle 🌙 untuk mengaktifkan/mematikan dark mode.
- CSS khusus yang mengatur tampilan gelap.
- JavaScript untuk menyimpan preferensi dark mode di
localStorage.
Langkah 1: Tambahkan Tombol Dark Mode
Tambahkan tombol toggle di dalam <body>:
<!-- Tombol Dark Mode --> <button id="dark-mode-toggle">🌙 Mode Gelap</button>
Langkah 2: Tambahkan CSS untuk Mode Gelap
Di dalam tag <style>, tambahkan kode berikut:
/* Tombol Dark Mode */
#dark-mode-toggle {
position: center;
top: 20px;
right: 20px;
background-color: #b56576;
color: #fff;
border: none;
padding: 10px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
z-index: 1000;
transition: background 0.3s;
}
#dark-mode-toggle:hover {
background-color: #8a3f52;
}
/* Mode Gelap */
body.dark-mode {
background-color: #121212;
color: #f0f0f0;
}
body.dark-mode .container,
body.dark-mode .detail-acara,
body.dark-mode .maps,
body.dark-mode .countdown,
body.dark-mode .buku-tamu {
background-color: #1e1e1e;
color: #f0f0f0;
border: 1px solid #333;
}
body.dark-mode .buku-tamu input,
body.dark-mode .buku-tamu textarea {
background-color: #2a2a2a;
color: #f0f0f0;
border: 1px solid #444;
}
body.dark-mode #btn-music,
body.dark-mode #btn-rsvp,
body.dark-mode .buku-tamu button {
background-color: #8a3f52;
}
body.dark-mode #btn-music:hover,
body.dark-mode #btn-rsvp:hover,
body.dark-mode .buku-tamu button:hover {
background-color: #b56576;
}
Langkah 3: Tambahkan JavaScript Toggle Dark Mode
Sebelum </body>, tambahkan script berikut:
<script>
const darkModeToggle = document.getElementById("dark-mode-toggle");
darkModeToggle.addEventListener("click", function() {
document.body.classList.toggle("dark-mode");
if (document.body.classList.contains("dark-mode")) {
darkModeToggle.textContent = "☀️ Mode Terang";
localStorage.setItem("darkMode", "enabled");
} else {
darkModeToggle.textContent = "🌙 Mode Gelap";
localStorage.setItem("darkMode", "disabled");
}
});
// Simpan preferensi mode
if (localStorage.getItem("darkMode") === "enabled") {
document.body.classList.add("dark-mode");
darkModeToggle.textContent = "☀️ Mode Terang";
}
</script>
Langkah 4: Uji di Browser
Simpan file (Ctrl + S) lalu buka di browser. Klik tombol 🌙 untuk mengaktifkan dark mode. Klik lagi untuk kembali ke mode terang. Preferensi akan tersimpan meskipun halaman di-refresh.
Penjelasan Kode
.dark-mode→ class yang mengubah warna latar & teks.toggle()→ untuk mengaktifkan/mematikan dark mode.localStorage→ menyimpan preferensi pengguna.
Kesimpulan
Di Part 8 ini, kita berhasil menambahkan mode gelap ke web undangan. Tampilan jadi lebih modern dan fleksibel sesuai kebutuhan pengguna. Pada Part 9, kita bisa lanjut menambahkan fitur form RSVP online terhubung WhatsApp.