Tutorial JavaScript: Membuat Dark Mode pada Situs Web
Dalam tutorial ini, kita akan belajar bagaimana membuat dark mode pada situs web menggunakan JavaScript. Dark mode adalah fitur yang memungkinkan pengguna mengubah tampilan situs web menjadi latar belakang gelap dengan teks berwarna terang, yang lebih nyaman untuk mata pada malam hari atau dalam kondisi pencahayaan rendah.
1. Membuat Struktur HTML dan Tombol Dark Mode:
Mulailah dengan membuat struktur HTML untuk situs web Anda dan tambahkan tombol untuk mengaktifkan dan menonaktifkan dark mode.
<!DOCTYPE html>
<html>
<head>
<title>Dark Mode Tutorial</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Selamat Datang di Situs Web Saya</h1>
<p>Ini adalah situs web yang menarik dan informatif.</p>
<button id="dark-mode-btn">Dark Mode</button>
<script src="script.js"></script>
</body>
</html>
2. Gaya CSS:
Tambahkan gaya CSS untuk mengatur tampilan situs web Anda dalam mode biasa dan dark mode.
/* styles.css */
body {
background-color: #f0f0f0; /* Warna latar belakang mode biasa */
color: #333; /* Warna teks mode biasa */
}
body.dark-mode {
background-color: #333; /* Warna latar belakang dark mode */
color: #f0f0f0; /* Warna teks dark mode */
}
3. Skrip JavaScript:
Berikutnya, buat skrip JavaScript untuk mengaktifkan dan menonaktifkan dark mode saat tombol "Dark Mode" diklik.
// script.js
const darkModeBtn = document.getElementById("dark-mode-btn");
const body = document.body;
darkModeBtn.addEventListener("click", function() {
body.classList.toggle("dark-mode");
if (body.classList.contains("dark-mode")) {
darkModeBtn.textContent = "Light Mode";
} else {
darkModeBtn.textContent = "Dark Mode";
}
});
Penjelasan:
Kami menggunakan getElementById() untuk memilih tombol "Dark Mode" dan addEventListener() untuk menambahkan event listener yang akan memicu perubahan ke dark mode ketika tombol diklik.
Fungsi toggle() pada classList akan menambahkan kelas "dark-mode" jika belum ada, atau menghapusnya jika sudah ada, sehingga mengaktifkan dan menonaktifkan dark mode.
Selain itu, kami juga mengubah teks pada tombol berdasarkan apakah situs web sedang dalam mode biasa atau dark mode.
Kesimpulan:
Dalam tutorial ini, Anda telah belajar cara membuat dark mode pada situs web menggunakan JavaScript. Dark mode adalah fitur yang semakin populer karena memberikan pengalaman pengguna yang lebih nyaman terutama pada malam hari atau dalam kondisi pencahayaan rendah. Dengan JavaScript, Anda dapat mengubah tampilan situs web secara dinamis dan memberikan pilihan dark mode kepada pengguna. Selamat mencoba dan selamat mengembangkan fitur menarik lainnya dalam pengembangan web Anda!