Dalam pengembangan web modern, fitur dark mode menjadi sangat populer karena memberikan pengalaman visual yang lebih nyaman bagi pengguna. Banyak website besar seperti YouTube, Twitter, dan Instagram menyediakan mode gelap untuk mengurangi silau layar, menghemat baterai, dan memberikan tampilan yang lebih elegan. Kabar baiknya, Anda bisa membuat dark mode di website Bootstrap hanya dengan CSS custom tanpa perlu plugin tambahan. Tutorial ini membahas langkah-langkah lengkap, tips styling, dan praktik terbaik untuk menerapkan dark mode secara clean dan profesional.
Mengapa Dark Mode Penting untuk Website Modern?
Sebelum mulai membuat dark mode dengan CSS custom, mari pahami mengapa fitur ini semakin menjadi standar antarmuka web:
1. Nyaman untuk Mata
Dark mode mengurangi paparan cahaya terang terutama saat digunakan di malam hari.
2. Hemat Baterai
Pada perangkat dengan layar OLED, warna gelap membutuhkan konsumsi daya lebih sedikit.
3. Terlihat Elegan dan Modern
Desain UI bernuansa gelap memberi kesan premium dan profesional.
4. Preferensi Pengguna Beragam
Memberikan opsi mode gelap membuat website terasa lebih personal dan fleksibel.
5. Meningkatkan Retensi dan UX
Pengguna bisa menyesuaikan tampilan dengan lingkungan mereka, sehingga pengalaman browsing jadi lebih nyaman.
Bootstrap sendiri tidak menyediakan tombol dark mode bawaan (kecuali versi baru dengan variable themes), sehingga pendekatan CSS custom adalah solusi paling fleksibel.
Konsep Dasar: Toggle Class untuk Dark Mode
Cara paling umum menambahkan dark mode adalah dengan menambahkan class khusus, misalnya .dark-mode pada <body>.
Ketika class tersebut aktif, semua elemen akan mengikuti styling dark mode melalui CSS custom.
Strukturnya sederhana:
<body class="dark-mode">
Atau dikontrol melalui JavaScript:
document.body.classList.toggle("dark-mode");
Dengan cara ini, kita bisa mengaktifkan/menonaktifkan dark mode hanya dengan 1 tombol.
Struktur HTML Dasar
Kita mulai dengan contoh HTML sederhana:
<button id="toggleDarkMode" class="btn btn-secondary">Dark Mode</button>
<div class="container mt-4">
<h1>Judul Website</h1>
<p>Contoh paragraf di website Bootstrap.</p>
</div>
Tombol tersebut akan menjadi pemicu toggle dark mode.
JavaScript untuk Mengaktifkan Dark Mode
Berikut script sederhana untuk menambahkan class .dark-mode ke <body>:
<script>
document.getElementById("toggleDarkMode").addEventListener("click", function() {
document.body.classList.toggle("dark-mode");
});
</script>
Dengan logika ini, setiap kali tombol diklik, mode gelap hidup/mati.
Membuat CSS Custom untuk Dark Mode
Bootstrap memiliki banyak elemen seperti card, navbar, table, form, dan button. Untuk dark mode yang profesional, Anda harus menyesuaikan warna-warna utamanya.
1. Atur Warna Dasar Dark Mode
.dark-mode {
background-color: #121212;
color: #e5e5e5;
}
2. Dark Mode untuk Navbar
.dark-mode .navbar {
background-color: #1e1e1e !important;
border-bottom: 1px solid #333;
}
.dark-mode .navbar a {
color: #f1f1f1 !important;
}
3. Dark Mode untuk Card Bootstrap
.dark-mode .card {
background-color: #1d1d1d;
border: 1px solid #333;
color: #e5e5e5;
}
4. Dark Mode untuk Table
.dark-mode table {
background-color: #1b1b1b;
color: #e5e5e5;
}
.dark-mode table tr {
border-color: #333;
}
5. Dark Mode untuk Form Input
.dark-mode .form-control {
background-color: #1c1c1c;
color: #f1f1f1;
border-color: #444;
}
.dark-mode .form-control:focus {
border-color: #666;
box-shadow: none;
}
6. Efek Hover
.dark-mode a:hover {
color: #ffffff;
}
.dark-mode .btn:hover {
opacity: 0.9;
}
Dengan CSS custom seperti ini, hampir semua komponen Bootstrap bisa berubah tampilan menjadi dark mode secara smooth.
Dark Mode dengan CSS Variable (Metode Modern)
Jika Anda ingin sistem yang lebih scalable, gunakan CSS variable:
:root {
--bg-color: #ffffff;
--text-color: #000000;
--card-bg: #ffffff;
}
.dark-mode {
--bg-color: #121212;
--text-color: #e5e5e5;
--card-bg: #1c1c1c;
}
body {
background: var(--bg-color);
color: var(--text-color);
}
.card {
background: var(--card-bg);
}
Keuntungan metode variable:
-
Mengubah tema cukup mengubah 1 baris variable
-
Lebih konsisten
-
Mudah maintenance
Menyimpan Mode Pilihan di LocalStorage (Agar Tidak Reset)
Agar dark mode tetap aktif setelah reload:
// Load mode saat halaman dibuka
if (localStorage.getItem("mode") === "dark") {
document.body.classList.add("dark-mode");
}
// Toggle mode + simpan ke localStorage
document.getElementById("toggleDarkMode").addEventListener("click", function() {
document.body.classList.toggle("dark-mode");
localStorage.setItem("mode",
document.body.classList.contains("dark-mode") ? "dark" : "light"
);
});
Sekarang website Anda akan mengingat preferensi user.
Tips Mendesain Dark Mode yang Profesional
1. Hindari Warna Hitam Pekat
Gunakan #121212 atau #1e1e1e agar lebih nyaman untuk mata.
2. Gunakan Kontras Warna yang Tepat
Pastikan teks tetap terbaca dengan jelas.
3. Tambahkan Transisi Smooth
* {
transition: background-color .3s, color .3s;
}
Hasilnya lebih elegan saat beralih antara mode terang dan gelap.
4. Cek Komponen Satu per Satu
Tidak semua komponen Bootstrap memiliki gaya default yang cocok, jadi Anda perlu menyesuaikan secara custom.
5. Uji pada Berbagai Layar
Mode gelap yang bagus harus tampil konsisten di mobile, tablet, dan desktop.
Kesimpulan
Membuat dark mode di website Bootstrap sangat mudah dilakukan hanya dengan CSS custom dan sedikit JavaScript. Dengan menambahkan class .dark-mode, mengatur CSS custom untuk komponen Bootstrap, menggunakan CSS variable modern, serta menyimpan preferensi di localStorage, Anda bisa menciptakan dark mode yang elegan, responsif, dan profesional.
Dark mode bukan hanya tren visual, tetapi juga fitur UX penting yang membantu pengunjung merasa lebih nyaman saat mengakses website Anda pada kondisi pencahayaan rendah. Dengan panduan ini, Anda dapat menerapkan dark mode pada website Bootstrap dengan bersih dan efisien tanpa plugin tambahan.