Enable data-bs-theme=dark on html element and toggle it with JavaScript and localStorage.
Dark Mode
<!-- Enable dark mode -->
<html data-bs-theme="dark">
<!-- Toggle dark mode -->
<button id="theme-toggle" class="btn btn-outline-secondary">
<i class="bi bi-moon-fill"></i>
</button>
<script>
const toggle = document.getElementById("theme-toggle");
const html = document.documentElement;
// Load saved preference
const saved = localStorage.getItem("theme") || "light";
html.setAttribute("data-bs-theme", saved);
toggle.addEventListener("click", () => {
const current = html.getAttribute("data-bs-theme");
const next = current === "dark" ? "light" : "dark";
html.setAttribute("data-bs-theme", next);
localStorage.setItem("theme", next);
});
</script>
<!-- Element-level override -->
<div class="card" data-bs-theme="dark">
Always dark card
</div>