Dark mode is a color scheme that uses dark backgrounds with light text, reducing eye strain and improving readability in low-light environments.
✅ Bootstrap 5 supports dark mode utilities for components, backgrounds, and text.
Ensure you have Bootstrap included in your project.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
Bootstrap provides .bg-dark and .text-light classes to enable dark mode for components.
<body class="bg-dark text-light">
<div class="container">
<h1>Welcome to Dark Mode</h1>
<p>This is a dark-themed Bootstrap page.</p>
</div>
</body>
✅ Explanation:
bg-dark → Sets dark background.
text-light → Changes text color to white.
Bootstrap provides pre-styled dark versions of many UI elements.
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dark Navbar</a>
</div>
</nav>
✅ Explanation:
navbar-dark → Applies light text on dark background.
bg-dark → Makes navbar background dark.
Example: Dark Mode Card
<div class="card bg-dark text-light">
<div class="card-body">
<h5 class="card-title">Dark Mode Card</h5>
<p class="card-text">This is a Bootstrap card in dark mode.</p>
</div>
</div>
To allow users to toggle between Light and Dark Mode, you can use JavaScript.
<button class="btn btn-primary" id="toggleDarkMode">Toggle Dark Mode</button>
<script>
const body = document.body;
const toggleBtn = document.getElementById("toggleDarkMode");
toggleBtn.addEventListener("click", () => {
body.classList.toggle("bg-dark");
body.classList.toggle("text-light");
});
</script>
✅ Explanation:
Clicking the button toggles dark mode on/off.
classList.toggle() adds or removes .bg-dark and .text-light.
Bootstrap allows theme customization with CSS variables and utilities.
<style>
:root {
--bs-body-bg: #121212; /* Dark background */
--bs-body-color: #ffffff; /* White text */
--bs-primary: #ff9800; /* Custom primary color */
}
</style>
<body class="bg-dark text-light">
<div class="container">
<h1 class="text-primary">Custom Themed Dark Mode</h1>
</div>
</body>
✅ Explanation:
--bs-body-bg → Changes background color.
--bs-body-color → Sets text color.
--bs-primary → Defines a custom theme color.
Bootstrap provides predefined theme colors that can be applied dynamically.
<button class="btn btn-primary">Primary</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-success">Success</button>
✅ Explanation:
Bootstrap provides colors like btn-primary, btn-danger, and btn-success.
For dark mode, you can use btn-outline-light instead:
<button class="btn btn-outline-light">Dark Mode Button</button>
To save user’s preference, use localStorage in JavaScript.
<script>
const body = document.body;
const toggleBtn = document.getElementById("toggleDarkMode");
// Check saved mode
if (localStorage.getItem("darkMode") === "enabled") {
body.classList.add("bg-dark", "text-light");
}
toggleBtn.addEventListener("click", () => {
body.classList.toggle("bg-dark");
body.classList.toggle("text-light");
// Save mode
if (body.classList.contains("bg-dark")) {
localStorage.setItem("darkMode", "enabled");
} else {
localStorage.removeItem("darkMode");
}
});
</script>
✅ Explanation:
Saves the user’s dark mode choice in localStorage.
Loads the preferred mode on page refresh.
Bootstrap Dark Mode & Themes offer flexibility in UI design.
Use .bg-dark and .text-light for dark mode.
Apply dark-themed components like navbar and cards.
Create a toggle button to switch between light and dark mode.
Customize themes using CSS variables.
Remember user preference with localStorage.
🚀 Now you can build a dark mode website using Bootstrap! 🎨