Cara Membuat Dark Mode di Bootstrap 5.3 (Color Mode)
Dark mode bukan lagi fitur tambahan — hampir semua aplikasi dan website modern punya tombol untuk berpindah tema terang dan gelap. Sejak Bootstrap 5.3, fitur ini resmi tersedia tanpa plugin tambahan lewat mekanisme yang disebut color mode.
Di artikel ini saya tunjukkan cara mengaktifkan dark mode di Bootstrap 5.3, membuat tombol toggle, dan menyimpan pilihan pengguna. Kode yang saya pakai adalah pola yang sama yang saya terapkan di beberapa project — sederhana dan tidak butuh library ekstra.
Apa itu Color Mode di Bootstrap 5.3?
Color mode adalah fitur Bootstrap 5.3 yang menggantikan dark mode versi beta. Konsepnya sederhana: atribut data-bs-theme pada elemen <html> menentukan tema yang dipakai — light, dark, atau auto.
<html data-bs-theme="dark">
Begitu atribut ini ditambahkan, semua komponen Bootstrap (navbar, card, tombol, tabel, form) otomatis berubah ke warna gelap. Tidak perlu menimpa CSS satu per satu.
Cara 1: Dark Mode Penuh (Sederhana)
Cara tercepat: set data-bs-theme="dark" langsung di elemen <html>.
<!doctype html>
<html lang="id" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dark Mode Bootstrap 5.3</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="#">Pemburu Kode</a>
</div>
</nav>
<div class="container py-5">
<div class="card">
<div class="card-body">
<h1 class="card-title">Halo, ini tema gelap</h1>
<p class="card-text">Semua komponen otomatis memakai warna gelap.</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Tinggal buka di browser — navbar, card, dan teks langsung tampil gelap.
Cara 2: Tombol Toggle Dark Mode (Terang/Gelap)
Cara yang paling sering dipakai di website nyata: satu tombol yang berpindah antara terang dan gelap, dan pilihannya diingat.
<button id="toggle-tema" class="btn btn-outline-light">🌙 Gelap</button>
<script>
// baca tema tersimpan, default light
const temaTersimpan = localStorage.getItem('tema') || 'light';
document.documentElement.setAttribute('data-bs-theme', temaTersimpan);
document.getElementById('toggle-tema').addEventListener('click', function () {
const sekarang = document.documentElement.getAttribute('data-bs-theme');
const baru = sekarang === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-bs-theme', baru);
localStorage.setItem('tema', baru);
});
</script>
Penjelasan alurnya:
- Saat halaman dibuka, baca tema dari
localStorage— kalau belum pernah dipilih, defaultlight. - Terapkan tema itu ke
<html>. - Saat tombol diklik, balik temanya, lalu simpan ke
localStorage.
Dengan begitu, pengguna yang sudah memilih gelap tidak akan balik ke terang setiap pindah halaman.
Cara 3: Ikuti Preferensi Sistem (auto)
Kalau kamu ingin website mengikuti mode terang/gelap di sistem operasi pengguna, pakai data-bs-theme="auto":
<html data-bs-theme="auto">
Bootstrap akan membaca prefers-color-scheme — preferensi yang diatur di Windows, macOS, atau Android. Pengguna yang sistemnya gelap akan melihat website gelap, dan sebaliknya.
Kombinasi paling fleksibel: mulai dengan auto, lalu tambahkan toggle manual yang menimpa ke light atau dark (dan menyimpannya di localStorage). Itu pola yang saya pakai di dashboard project — pengguna dapat kendali penuh, tapi defaultnya ikut sistem.
Tips dari Pengalaman Saya
- Perhatikan teks dan ikon custom — komponen Bootstrap otomatis gelap, tapi teks atau ikon yang kamu beri warna manual bisa tetap gelap di atas latar gelap. Periksa elemen yang kamu styling sendiri.
- Gunakan
bg-body-tertiary— kelas utility ini sudah menyesuaikan tema secara otomatis, lebih aman daripadabg-darkyang kaku. - Jangan lupa elemen luar Bootstrap — body dan konten sendiri juga perlu warna latar yang sesuai. Bootstrap 5.3 sudah mengatur
bodylewat--bs-body-bg, jadi biasanya cukup. - Tes kedua mode — sebelum rilis, periksa kontras di mode terang dan gelap. Ini sering luput dan bikin tampilan tidak nyaman.
FAQ — Pertanyaan Umum
Bagaimana cara mengaktifkan dark mode di Bootstrap 5.3?
Tambahkan atribut data-bs-theme="dark" pada elemen html. Bootstrap 5.3 secara otomatis menerapkan warna gelap ke semua komponennya.
Apa itu data-bs-theme di Bootstrap?
data-bs-theme adalah atribut yang memberitahu Bootstrap mode warna yang dipakai: light (default), dark, atau auto (mengikuti preferensi sistem).
Bagaimana cara membuat tombol toggle dark mode di Bootstrap?
Buat tombol yang mengganti atribut data-bs-theme pada elemen html menggunakan JavaScript, lalu simpan pilihannya di localStorage supaya tetap tersimpan saat halaman dimuat ulang.
Apakah Bootstrap 5.3 mendukung dark mode otomatis?
Ya, dengan data-bs-theme="auto" Bootstrap mengikuti prefers-color-scheme dari sistem operasi pengguna. Kamu juga bisa menambahkan toggle manual untuk pilihan yang lebih fleksibel.
Kesimpulan
Dark mode di Bootstrap 5.3 sangat mudah dipasang: satu atribut data-bs-theme="dark" sudah mengubah semua komponen, dan dengan sedikit JavaScript kamu bisa menambahkan tombol toggle yang mengingat pilihan pengguna lewat localStorage.
Mulai dari Cara 1 untuk mencoba, lalu kembangkan ke toggle + auto saat projectmu sudah siap. Itu alur yang paling sedikit menimbulkan kebingungan.
