Halooo! Selamat datang kembali di Sandi Dharma Blog. Anda tau Bootstrap? Sebuah css framework yang powerful dan sangat mudah Demi digunakan. Setelah sekian Pelan, 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 đ
Membikin Teladan
Kita akan buat Teladan halaman web terlebih dahulu. Karena fitur dark mode Eksis pada versi 5.3, pastikan Anda menggunakan cdn dengan versi tersebut ya.
html lang="en">
head>
meta charset="utf-8" />
meta name="viewport" content="width=device-width, initial-scale=1" />
title>Bootstrap Dark Modetitle>
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">Darkbutton>
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 Teladan tampilan tersebut kita terdapat dua buah tombol yang nanti kita gunakan Demi mengganti mode menjadi light atau dark.
Membikin Fitur Dark Mode
Demi Membikin fitur dark mode, kita cukup menambahkan atribut data-bs-theme dengan value dark. Berdasarkan dokumentasi resminya, atribut ini dapat kita letakkan secara Dunia di elemen atau pada elemen yang spesifik misalnya
data-bs-theme pada elemen Pertama, kita tambahkan atribut dengan value light terlebih dahulu.
html lang="en" data-bs-theme="light">html>
Setelah itu, kita akan Membikin script sederhana Demi merubah value atribut tersebut dengan aksi klik tombol yang telah kita buat.
Buat script berikut pada bagian Rendah, sebelum tag
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 Ketika tombol Dark diklik dan menjadi light Ketika tombol Light diklik.
Kode kita secara keseluruhan akan menjadi seperti ini:
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 Modetitle>
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">Darkbutton>
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 đ
Lebih kompleks