Cara Membuat Dark Mode di Website dengan JavaScript
Dark mode kini menjadi fitur wajib di banyak aplikasi dan website. Selain terlihat modern, dark mode juga ramah mata, terutama saat digunakan di malam hari. Kalau Anda ingin menambahkan fitur ini ke website Anda, jangan khawatir—prosesnya lebih sederhana dari yang Anda kira! Dalam artikel ini, saya akan berbagi langkah-langkah praktis untuk membuat dark mode menggunakan JavaScript.
Kenapa Dark Mode Itu Penting?
Jujur saja, saya dulu menganggap dark mode hanyalah tren desain. Tapi setelah menggunakannya, saya sadar betapa nyamannya fitur ini, apalagi saat coding tengah malam. Tidak hanya itu, dark mode juga bisa menghemat baterai untuk perangkat dengan layar OLED atau AMOLED.
Langkah-Langkah Membuat Dark Mode
1. Siapkan Struktur HTML Sederhana
Pertama-tama, buat file HTML dengan elemen dasar. Misalnya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button id="dark-mode-toggle">Toggle Dark Mode</button>
<h1>Selamat Datang di Dark Mode Tutorial!</h1>
<p>Cobalah fitur dark mode ini!</p>
<script src="script.js"></script>
</body>
</html>
Di sini, tombol dengan ID dark-mode-toggle akan menjadi kunci untuk mengaktifkan dan menonaktifkan dark mode.
2. Tambahkan CSS untuk Dark Mode
Buat file CSS bernama styles.css untuk mendefinisikan gaya biasa dan gaya dark mode:
body {
font-family: Arial, sans-serif;
background-color: white;
color: black;
transition: background-color 0.3s, color 0.3s;
}
body.dark-mode {
background-color: #121212;
color: #ffffff;
}
Di sini, kita menggunakan class .dark-mode untuk mengubah warna latar belakang dan teks.
3. Tambahkan Logika JavaScript
Buat file JavaScript bernama script.js untuk menangani perubahan mode:
const toggleButton = document.getElementById('dark-mode-toggle');
toggleButton.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
// Simpan preferensi pengguna di localStorage
const isDarkMode = document.body.classList.contains('dark-mode');
localStorage.setItem('darkMode', isDarkMode);
});
// Cek preferensi pengguna saat halaman dimuat
const savedMode = localStorage.getItem('darkMode');
if (savedMode === 'true') {
document.body.classList.add('dark-mode');
}
Dengan logika ini, mode yang dipilih pengguna akan tetap tersimpan meskipun mereka me-refresh halaman.
Tips Tambahan
- Gunakan transisi CSS untuk efek perubahan yang lebih mulus.
- Pastikan semua elemen website kompatibel dengan dark mode, termasuk gambar dan ikon.
- Jika website Anda menggunakan framework seperti React atau Vue, Anda bisa menerapkan konsep serupa dengan state management.
Kesimpulan
Menambahkan dark mode ke website tidaklah sulit, bahkan bisa menjadi fitur tambahan yang meningkatkan pengalaman pengguna. Dengan langkah-langkah di atas, Anda bisa mulai menerapkannya di website Anda sendiri.
Selamat mencoba! Kalau Anda punya pertanyaan, jangan ragu untuk menuliskannya di kolom komentar. 😊
Bareh
Comparing two bad things doesn't make one of them better.
.png)
