Saat membuka sebuah website, kadang tampilan yang terlalu terang terasa kurang nyaman, terutama ketika digunakan pada malam hari. Salah satu fitur sederhana yang bisa digunakan untuk mengatasi hal tersebut adalah Dark Mode.
Dark Mode membuat warna website menjadi lebih gelap sehingga tampilannya terasa lebih nyaman dan juga terlihat lebih modern. Fitur ini sebenarnya tidak terlalu sulit dibuat. Kita hanya membutuhkan HTML untuk struktur halaman, CSS untuk mengatur tampilan, dan JavaScript untuk membuat tombol Dark Mode bekerja.
Di artikel ini, kita akan membuat Dark Mode sederhana dari awal sampai bisa digunakan di browser.
Dark Mode dibuat menggunakan HTML, CSS, dan JavaScript. HTML digunakan untuk membuat struktur halaman, CSS mengatur tampilan, sedangkan JavaScript digunakan untuk membuat tombol pergantian tema bekerja.
1. Persiapan
Sebelum mulai membuat website, ada beberapa hal yang perlu disiapkan terlebih dahulu:
- Laptop atau PC
- Visual Studio Code atau text editor lainnya
- Browser seperti Google Chrome
- Sedikit pemahaman HTML, CSS, dan JavaScript
Buat sebuah folder baru, misalnya:
dark-mode-website
Kemudian buat tiga file di dalam folder tersebut:
dark-mode-website/ ├── index.html ├── style.css └── script.js
2. Membuat Struktur HTML
Pertama, kita buat halaman website sederhana menggunakan HTML. Buka file index.html, lalu masukkan kode berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<button id="darkModeBtn">🌙 Dark Mode</button>
<h1>Website Sederhana</h1>
<p>
Ini adalah contoh website sederhana yang memiliki
fitur Dark Mode menggunakan HTML, CSS, dan JavaScript.
</p>
<div class="card">
<h2>Selamat Datang!</h2>
<p>
Klik tombol di atas untuk mengubah tampilan
website menjadi mode gelap.
</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Pada bagian ini kita membuat judul, paragraf, sebuah card, dan tombol yang nantinya digunakan untuk mengaktifkan Dark Mode.
3. Membuat Tampilan dengan CSS
Setelah HTML selesai, sekarang kita atur tampilannya menggunakan CSS. Buka file style.css, kemudian masukkan kode berikut:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f7fb;
color: #222;
transition: 0.3s;
}
.container {
width: 90%;
max-width: 800px;
margin: 80px auto;
text-align: center;
}
button {
padding: 12px 20px;
border: none;
border-radius: 8px;
background-color: #222;
color: white;
cursor: pointer;
margin-bottom: 30px;
}
button:hover {
opacity: 0.8;
}
h1 {
margin-bottom: 15px;
}
p {
line-height: 1.7;
}
.card {
margin-top: 30px;
padding: 30px;
background-color: white;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
/* Dark Mode */
body.dark {
background-color: #121212;
color: #f5f5f5;
}
body.dark .card {
background-color: #1f1f1f;
box-shadow: none;
}
body.dark button {
background-color: #f5f5f5;
color: #222;
}Di dalam CSS tersebut terdapat bagian khusus body.dark. Bagian inilah yang nantinya digunakan ketika Dark Mode aktif.
Kita juga memberikan transition: 0.3s; supaya perubahan warna tidak terasa terlalu tiba-tiba.
4. Membuat Fungsi Dark Mode dengan JavaScript
Sekarang bagian yang paling penting. Kita akan membuat tombol tadi benar-benar berfungsi menggunakan JavaScript.
Buka file script.js, kemudian masukkan kode berikut:
const darkModeBtn = document.getElementById("darkModeBtn");
darkModeBtn.addEventListener("click", function () {
document.body.classList.toggle("dark");
if (document.body.classList.contains("dark")) {
darkModeBtn.textContent = "☀️ Light Mode";
} else {
darkModeBtn.textContent = "🌙 Dark Mode";
}
});Cara kerjanya cukup sederhana. Ketika tombol diklik, JavaScript menjalankan:
document.body.classList.toggle("dark");Perintah tersebut akan menambahkan class dark ke <body> jika Dark Mode belum aktif. Kalau diklik lagi, class tersebut akan dihapus.
Teks tombol juga ikut berubah dari 🌙 Dark Mode menjadi ☀️ Light Mode. Jadi pengguna bisa mengetahui mode apa yang sedang digunakan.
5. Menjalankan Website
Setelah semua kode selesai, simpan ketiga file tersebut. Kemudian buka file index.html dengan browser.
Mau Kuasai Membuat Dark Mode pada Website Menggunakan HTML, CSS, dan JavaScript Sampai Bisa Praktik Langsung?
Materi ini juga kami ajarkan langsung di kelas Edusoft Center, dibimbing mentor, sampai kamu bisa praktik nyata — bukan cuma baca teori.
Tanya Kursus via WhatsApp Lihat contoh project nyata dari siswa kami →
Pada kondisi awal, website akan menggunakan mode terang. Tampilan terdiri dari judul website, paragraf, tombol Dark Mode, dan card informasi.
6. Mencoba Dark Mode
Sekarang klik tombol 🌙 Dark Mode. Setelah tombol ditekan, JavaScript akan menambahkan class dark ke bagian <body>.
Tampilan website kemudian berubah menjadi lebih gelap. Tombol juga berubah menjadi ☀️ Light Mode.
Perubahan tampilan terjadi karena JavaScript menambahkan class
dark, kemudian CSS menerapkan warna yang sudah ditentukan untuk mode gelap.
7. Cara Kerja Dark Mode
Sebenarnya konsep Dark Mode yang kita buat cukup sederhana. Alurnya seperti ini:
↓
Mode terang ditampilkan
↓
User klik tombol Dark Mode
↓
JavaScript berjalan
↓
Class “dark” ditambahkan
↓
CSS mengubah warna website
↓
Dark Mode aktif
Ketika tombol ditekan lagi, class dark akan dihapus sehingga website kembali ke tampilan awal.
Jadi JavaScript tidak langsung mengubah semua warna satu per satu. JavaScript cukup mengatur class, sedangkan perubahan tampilannya diatur oleh CSS.
8. Pengujian Fitur
Setelah fitur selesai dibuat, saya melakukan beberapa pengujian sederhana untuk memastikan semuanya berjalan dengan baik.
| Pengujian | Hasil yang Diharapkan |
|---|---|
| Membuka website | Mode terang muncul |
| Klik Dark Mode | Website berubah menjadi gelap |
| Klik Light Mode | Website kembali terang |
| Klik berkali-kali | Mode tetap bisa berganti |
| Membuka di browser | Tidak ada error |
9. Hasil Akhir
Setelah semua langkah selesai, kita sudah memiliki website sederhana dengan fitur Dark Mode.
dark-mode-website/ ├── index.html ├── style.css └── script.js
Walaupun fiturnya sederhana, konsep seperti ini sebenarnya sering digunakan pada website modern. Dari latihan ini kita juga bisa belajar bagaimana HTML, CSS, dan JavaScript saling bekerja sama dalam sebuah website.
HTML bertugas membuat struktur halaman, CSS mengatur tampilan, sedangkan JavaScript membuat halaman menjadi interaktif.
11. Kesimpulan
Membuat Dark Mode ternyata tidak membutuhkan kode yang terlalu banyak. Dengan HTML, CSS, dan sedikit JavaScript, kita sudah bisa membuat fitur yang membuat website terasa lebih modern dan nyaman digunakan.
Dari project sederhana ini, kita juga bisa mengembangkan fitur lainnya, misalnya membuat Dark Mode tersimpan otomatis, menambahkan animasi saat pergantian tema, atau membuat website mengikuti mode perangkat pengguna.
Jadi, meskipun project-nya sederhana, fitur seperti Dark Mode bisa menjadi latihan yang bagus untuk memahami dasar Web Development, terutama bagaimana JavaScript berinteraksi dengan HTML dan CSS.
Dengan project sederhana ini, kita dapat memahami dasar hubungan antara HTML, CSS, dan JavaScript dalam membuat website yang interaktif.
Penulis : Devina Ghea Amanda
Mau Kuasai Membuat Dark Mode pada Website Menggunakan HTML, CSS, dan JavaScript Sampai Bisa Praktik Langsung?
Materi ini juga kami ajarkan langsung di kelas Edusoft Center, dibimbing mentor, sampai kamu bisa praktik nyata — bukan cuma baca teori.
Tanya Kursus via WhatsApp Lihat contoh project nyata dari siswa kami →