Tutorial Cara Membuat Dark Mode pada Website
Tutorial: Cara Membuat Dark Mode pada Website
Dark mode adalah salah satu fitur populer yang memungkinkan pengguna untuk mengganti tampilan website ke mode gelap. Berikut ini adalah langkah-langkah sederhana untuk membuat dark mode pada website menggunakan HTML dan CSS.
1. Persiapan Struktur HTML
Langkah pertama adalah membuat struktur dasar HTML. Kita akan membuat sebuah halaman dengan heading dan paragraf sederhana, serta tombol untuk mengaktifkan dark mode.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Tutorial</title>
</head>
<body>
<h1>Dark Mode pada Website</h1>
<p>Ini adalah contoh halaman dengan dark mode.</p>
<button>Toggle Dark Mode</button>
</body>
</html>2. Menambahkan CSS untuk Dark Mode
Kita akan menambahkan beberapa gaya CSS sederhana untuk mendefinisikan warna latar belakang dan teks untuk mode terang dan gelap.
<style>
body {
background-color: white;
color: black;
transition: background-color 0.5s, color 0.5s;
}
.dark-mode {
background-color: #333;
color: white;
}
</style>3. Menambahkan Fitur Toggle dengan JavaScript
Untuk mengaktifkan atau menonaktifkan dark mode, kita memerlukan sedikit JavaScript. Saat tombol diklik, kita akan menambahkan atau menghapus class .dark-mode dari elemen <body>.
<script>
function toggleDarkMode() {
document.body.classList.toggle('dark-mode');
}
</script>4. Menghubungkan Tombol dengan Fungsi JavaScript
Terakhir, tambahkan atribut onclick pada tombol agar berfungsi saat ditekan.
<button onclick="toggleDarkMode()">Toggle Dark Mode</button>Kesimpulan
Dengan langkah-langkah di atas, kamu sekarang sudah bisa menambahkan dark mode ke dalam website-mu. Dark mode memberikan pengalaman pengguna yang lebih nyaman, terutama di kondisi pencahayaan rendah.