Membuat Fitur Dark Mode Toggle Menggunakan HTML, CSS, dan JavaScript
Dark mode atau mode gelap menjadi fitur yang semakin populer pada berbagai website modern. Mode ini memungkinkan tampilan halaman berubah dari latar terang menjadi latar gelap sehingga lebih nyaman digunakan terutama pada kondisi cahaya rendah.
Pada artikel ini akan dijelaskan cara membuat fitur Dark Mode Toggle sederhana menggunakan HTML, CSS, dan JavaScript tanpa menggunakan library tambahan.
Struktur Dasar HTML
Langkah pertama adalah membuat struktur HTML sederhana yang berisi tombol untuk mengaktifkan atau menonaktifkan mode gelap.
<!DOCTYPE html>
<html>
<head>
<title>Dark Mode Toggle</title>
</head>
<body>
<button id="toggle">Toggle Dark Mode</button>
<h2>Contoh Halaman Website</h2>
<p>Ini adalah contoh halaman untuk mencoba fitur dark mode.</p>
<script src="script.js"></script>
</body>
</html>
Menambahkan CSS untuk Mode Terang dan Gelap
Selanjutnya tambahkan styling CSS untuk menentukan tampilan mode terang dan mode gelap.
body {
background: white;
color: black;
font-family: Arial, sans-serif;
transition: 0.3s;
}
.dark-mode {
background: #121212;
color: white;
}
button {
padding: 10px 20px;
cursor: pointer;
margin: 20px;
}
Pada kode di atas, class dark-mode digunakan untuk mengubah tampilan halaman menjadi mode gelap.
Menambahkan JavaScript untuk Toggle Dark Mode
Selanjutnya tambahkan JavaScript untuk mengaktifkan tombol dark mode.
const toggle = document.getElementById("toggle");
toggle.addEventListener("click", function() {
document.body.classList.toggle("dark-mode");
});
Menyimpan Preferensi Dark Mode Menggunakan Local Storage
Agar dark mode tetap aktif ketika halaman dibuka kembali, kita dapat menyimpan preferensi pengguna menggunakan localStorage.
const toggle = document.getElementById("toggle");
if(localStorage.getItem("theme") === "dark") {
document.body.classList.add("dark-mode");
}
toggle.addEventListener("click", function() {
document.body.classList.toggle("dark-mode");
if(document.body.classList.contains("dark-mode")) {
localStorage.setItem("theme","dark");
} else {
localStorage.setItem("theme","light");
}
});
Keuntungan Menggunakan Dark Mode
- Mengurangi kelelahan mata saat menggunakan perangkat pada kondisi gelap
- Membuat tampilan website lebih modern
- Meningkatkan pengalaman pengguna
- Memberikan pilihan tampilan bagi pengunjung website
Kesimpulan
Membuat fitur dark mode toggle dapat dilakukan dengan cukup sederhana menggunakan HTML, CSS, dan JavaScript. Dengan menambahkan fitur penyimpanan preferensi menggunakan localStorage, pengguna tidak perlu mengaktifkan dark mode setiap kali membuka halaman.
Hubungi Kami
Jika terdapat masalah keamanan digital, konten internet, atau informasi online yang mempengaruhi privasi maupun reputasi digital, penanganan yang tepat dapat membantu mengelola visibilitas informasi tersebut.
Hubungi Kami melalui kontak resmi.
