Halooo! Selamat datang kembali di Ruang Developer Blog. Kamu tau Bootstrap? Sebuah css framework yang powerful dan sangat mudah untuk digunakan. Setelah sekian lama, akhirnya Bootstrap merilis fitur color mode atau theme pada versi 5.3.
Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
Source: https://getbootstrap.com/docs/5.3/customize/color-modes/
Dengan adanya fitur tersebut, sekarang kita bisa menambahkan fitur dark mode pada website yang kita buat menggunakan Bootstrap. Yeay.. 😍
Oleh karena itu, pada postingan ini kita akan mencoba fitur dark mode pada Bootstrap. Yuk kita mulai 🚀
Membuat Contoh
Kita akan buat contoh halaman web terlebih dahulu. Karena fitur dark mode ada pada versi 5.3, pastikan kamu menggunakan cdn dengan versi tersebut ya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap Dark Mode</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container py-5">
<div class="card">
<div class="card-body text-center">
<h1>Halo, dunia!</h1>
<button class="btn btn-primary btn-sm" id="dark-button">Dark</button>
<button class="btn btn-primary btn-sm" id="light-button">
Light
</button>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"
></script>
</body>
</html>
Hasil:
Pada contoh tampilan tersebut kita terdapat dua buah tombol yang nanti kita gunakan untuk mengganti mode menjadi light atau dark.
Membuat Fitur Dark Mode
Untuk membuat fitur dark mode, kita cukup menambahkan atribut data-bs-theme dengan value dark. Berdasarkan dokumentasi resminya, atribut ini dapat kita letakkan secara global di elemen <html> atau pada elemen yang spesifik misalnya <footer>. Pada contoh ini kita akan menggunakan atribut secara global agar tema diaplikasikan pada keseluruhan halaman. Oleh karen itu, kita perlu menambahkan atribut data-bs-theme pada elemen <html>.
Pertama, kita tambahkan atribut dengan value light terlebih dahulu.
<html lang="en" data-bs-theme="light"></html>
Setelah itu, kita akan membuat script sederhana untuk merubah value atribut tersebut dengan aksi klik tombol yang telah kita buat.
Buat script berikut pada bagian bawah, sebelum tag </body>
<script>
const darkButton = document.getElementById("dark-button");
const lightButton = document.getElementById("light-button");
const html = document.querySelector("html");
darkButton.addEventListener("click", () => {
html.setAttribute("data-bs-theme", "dark");
});
lightButton.addEventListener("click", () => {
html.setAttribute("data-bs-theme", "light");
});
</script>
Fungsi script tersebut adalah merubah value atribut data-bs-theme menjadi dark saat tombol Dark diklik dan menjadi light saat tombol Light diklik.
Kode kita secara keseluruhan akan menjadi seperti ini:
<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap Dark Mode</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container py-5">
<div class="card">
<div class="card-body text-center">
<h1>Halo, dunia!</h1>
<button class="btn btn-primary btn-sm" id="dark-button">Dark</button>
<button class="btn btn-primary btn-sm" id="light-button">
Light
</button>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"
></script>
<script>
const darkButton = document.getElementById("dark-button");
const lightButton = document.getElementById("light-button");
const html = document.querySelector("html");
darkButton.addEventListener("click", () => {
html.setAttribute("data-bs-theme", "dark");
});
lightButton.addEventListener("click", () => {
html.setAttribute("data-bs-theme", "light");
});
</script>
</body>
</html>
Daaaann,,, ini hasilnya 😍
See the Pen by (@) on CodePen.
Lebih kompleks
See the Pen by (@) on CodePen.